News APIからの画像の追加

Question

私は正常に動作しているnewsapi.orgを使用してAPIを正常に実装しました。しかし、私が持っている情報はテキストだけであり、各見出しの画像を追加したい。見出しが明らかに変化しているので、これをどうやって行うのか分かりません。

JSONファイル内にurlToImageタグがあります。これは、おそらくこれを実装する必要があります。あなたは私のコードから、これを実装する際に始めたことが分かりますが、役に立たないでしょう。

これを実現するための助けがあれば幸いです。

jQueryの

$(document).ready(function() { 
    $.ajax({ 
    url: "https://newsapi.org/v2/top-headlines?sources=mtv-news&apiKey=XXXXXX", 
    method: "GET", 
    success: function(data) { 
     processData(data); 
    } 
    }); 

    function processData(data) { 
    var articleItems = []; 
    for (var i = 0; i < data.articles.length; i++) { 

     var author = data.articles[i].author; 
     var title = data.articles[i].title; 
     var description = data.articles[i].description; 
     var urlToImage = data.articles[i].urlToImage; 
     var artUrl = data.articles[i].url; 


     var $author = $('<div class="author">Author: ' + author + "</div >"); 
     var $title = $("<a href=" + artUrl + '><div class="title">' + title + "</div ></a>"); 
     var $description = $("<a href=" + artUrl + '><div class="description">' + description + "</div ></a>"); 
     var $urlToImage = $("<a href=" + artUrl + '><img class="urlToImage" src">') 
     $("#entertainment_news").append($author, $title, $description, $urlToImage); 
     $("#entertainment_news").append("<br />"); 

     console.log(artUrl); 
    } 
    } 
}); 

HTML

<div class="tab-pane fade" id="entertainment"> 
     <h3>ENTERTAINMENT</h3> 
     <p id="entertainment_news"></p> 
     </div> 

Answer 1

append()は1つの引数しか受け入れず、4つのjQueryオブジェクトがあります。 jQueryオブジェクトにHTMLをラッピングし、通常の文字列としてそれらを持っています。

var $author = '<div class="author">Author: ' + author + '</div >'; 
var $title = '<a href=' + artUrl + '><div class="title">' + title + '</div ></a>'; 
var $description = '<a href=' + artUrl + '><div class="description">' + description + '</div ></a>'; 

また、画像のsrc属性のソースパスもありません。それはurlToImageだと仮定すると、あなたがこれを行うだろう：

var $urlToImage = '<a href=' + artUrl + '><img class="urlToImage" src=' + urlToImage + '>; 

を次に、あなたの最初のappend()呼び出しで次の操作を行います。

$("#entertainment_news").append($author + $title + $description + $urlToImage); 

Answer 2

はずのsrcがurlToImageではなく、あなたが現在それを持っているとして、それはクラスということ？