2017-11-27 6 views
2

異なるコンテンツプロバイダのニュースを集めるWebページを作成しようとしています。私はhttps://newsapi.orgによって提供されるAPIを使用しています。JQuery APIを取得する

プロバイダの名前を取得してリストに追加したいと考えています。

私は間違ったことをしていて、理解できません。要求を受け取っていないようです。

は、ここに私のPlunker

https://embed.plnkr.co/WKPPzmFGdrruuXzumog6/

そして

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Spotify Breakout</title> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
     <script> 

function queryApi() { 
    $(document).ready(function() { 
    const searchURL = 'https://newsapi.org/v1/sources?language=en'; 
     $.get(searchURL, { 
      type: 'sources', 
      key: '0dcb4145d12f4a129cad2c7cfa52a2b9' 
     }).done(function(data){ 
\   var names = data.sources.name; 
      names.forEach(function(names) { 
          var nameDiv = $('<li>'); 
      nameDiv.html(sources.name); 
      $('#nameList').append(nameDiv); 
      }); 
     }); 
     }); 
} 

     </script> 
    </head> 
    <body> 
<ul id="nameList"></ul> 
    </body> 
</html> 
+0

、あなたは間違って何をしているのか?ランタイムエラーはありますか?あなたのコードの振る舞いは、あなたが意図したものと違うのですか?どのように?あなたの質問は不完全です。 – Nepho

+2

OPの関連コードを外部リンクに追加しないでください。\ – guradio

+0

私は情報を追加しました。私の問題では、リクエストが得られません。 –

答えて

1

あなたのコードは、APIからデータを取得するコードです。しかし、APIからデータを取得(解析)する方法は間違っています。解析する前にデータがどのように構築されているかをよく確認してください。

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>Spotify Breakout</title> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script> 
 
     $(document).ready(function() { 
 
      const searchURL = 'https://newsapi.org/v1/sources?language=en'; 
 
      $.get(searchURL, { 
 
       type: 'sources', 
 
       key: '0dcb4145d12f4a129cad2c7cfa52a2b9' 
 
      }).done(function(data){ 
 
       var names = data.sources.name; 
 
       data.sources.forEach(function(source) { 
 
        var nameDiv = $('<li>'); 
 
        nameDiv.html(source.name); 
 
        $('#nameList').append(nameDiv); 
 
       }); 
 
      }); 
 
     }); 
 
     
 
    </script> 
 
    </head> 
 
    <body> 
 
     <ul id="nameList"></ul> 
 
    </body> 
 
</html>

+0

ありがとうございます、それは完璧に動作します! –

関連する問題