Tell me how to do it right. I need the headers in the "Other News" block to be loaded from the JSON file. I created a script, but I only get the latest news. What could be the problem?

function News() { this.photo = undefined; this.article = ''; this.text = ''; } News.prototype.renderNews = function (jQuerySelector) { var $newsOtherNews = $('<div />', { class: 'news__other-news' }); $.get({ url: './news.json', dataType: 'json', context: this, success: function (data) { // Создание таблицы других новостей var $contentItem = $('<div />', { class: 'other-news__content' }); for(var i = 0; i < data.news.length; i++) { var $itemArticle = $('<p />', { text: data.news[i].article }); } $itemArticle.appendTo($contentItem); $contentItem.appendTo($newsOtherNews); } }); jQuerySelector.append($newsOtherNews); }; $(document).ready(function () { var news = new News(); news.renderNews($('.news')); });

Json

 { "result": "1", "news": [ { "photo": "./img/img-news/header-background.jpg", "article": "Проект «Краснодог»", "text": "Проверка текста, который я написал и составил 1." }, { "photo": "", "article": "Проект «Форум добрых дел»", "text": "Проверка текста, который я написал и составил 2." } ] }

It should be

enter image description here

    1 answer 1

    At each iteration of the loop, you create a new $itemArticle , so after the loop this variable contains the last value.

     for(var i = 0; i < data.news.length; i++) { var $itemArticle = $('<p />', { text: data.news[i].article }); $itemArticle.appendTo($contentItem); }