Страница новостей?

Question

[NewPerson2]

Есть апишка json с новостями, Нужно по клику сгенерированной кнопки
Открыть статью полностью. + добавить возможность добавлять комментарии к странице.
Новости вывел.
Дальше как быть не знаю.
Если что где криво не судите строго новенький

$(document).ready(function () {
	my_url = "https:news.investforum.ru/feed/filter/full/?&channels=satellits";
    $.getJSON(my_url, function(data) {
			for ( i in data ) {
				var newsbox = $("<div>", {class: 'news-item'}),
					link = $( "<a>", { class: "news-item-btn", text: 'Learn more', id: "" + i}),
					infobox = $("<div>", {class: "news-item-info"});
				$(document).find('.blog').append(newsbox)
					newsbox.append('<div class="news-item-img"><img src=' + data[i].Image + ">");
					infobox.append("<h3>" + data[i].Title);
					infobox.append("<div>" + data[i].Description);
					infobox.append(link);
					newsbox.append(infobox);
			}   			
        });
});

Answer 1

[Ihor Bratukh]

Вывели новости Вы мягко говоря хреново, код сложно поддерживать и читать. Не оптимизировано: создание элементов в цикле, append в цикле. Append должен быть один раз, в конце работы скрипта, а не в цикле. Задачу вашу легче всего выполнить на vue/react/angular, но если хотите попробовать на jQuery то вот вам пример вывода (шаблон вывода находится вверху, в объекте setting.template):

`
    <article>
        <h2>${news.Title}</h2>
        <div>
            ${store.loop(news.Channels, function(channel, index) {
                return `<span>${channel.Name} (${channel.ID})</span>${store.semiclon(news.Channels.length, ++index)}`;
            })}
        </div>
        <hr>
        <small>
            <a href="${news.Link}">${news.Link}</a>
        </small>
        <hr>
        <p>${news.Description}</p>
        <hr>
        <div>
            ${store.loop(news.Tags, function(tag, index) {
                return `<span>${tag.Name}</span>${store.semiclon(news.Tags.length, ++index)}`;
            })}
        </div>
        <small>${news.Creator} | ${store.date('{DD}/{MM}/{YYYY} {hh}:{mm}:{ss}', news.PublishDate)}</small>
    </article>
`

Comments

[Ihor Bratukh]

Обновил js код, добавил комментарии

Answer 2

[Mikhail Osher]

Как раз для таких целей есть React/VueJS

Comments

[NewPerson2]

К сожалению , я еще не знаю вюи .Тут в джейквери с трудом разбираюсь.
По этому нужно как то в джейквери сделать.У вас есть идеи как это можно более мение по человечески сделать поделитесь пожалуйста.