javascript - 如何使用 jquery DOM 选择器显示 JSON 数据？

Question

我想在我的网站上显示每条新闻的 json.articles[i].title 这是我的网站屏幕截图和我的代码:

在 main.js 中:

(function() {

    $.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=my-api-key', function(json) {
        $("#sidebar-wrapper li").each(function() {
            $('li').html(json.articles[0].titles)
        });
    });
})();

我的 HTML 文件:

<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <strong>Latest Headines</strong>
        <li>
            <a href="">Your news title</a>
        </li>
        <li>
            <a href="">Your news title</a>
        </li>
        <li>
            <a href="">Your news title</a>
        </li>
        <li>
            <a href="">Your news title</a>
        </li>
        <li>
            <a href="">Your news title</a>
        </li>
    </ul>
</div>

这是我的网站屏幕截图，我想显示 json.articles[].title 中的每个新闻标题，而不是“您的新闻标题”。(有关说明，请参阅屏幕截图和 HTML 代码)。

Answer 1

尝试下面的代码

    (function () {

        $.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b', function (json) {
            var html = "";
            $(json.articles).each(function (index, value) {
                $(".sidebar-nav").append("<li><a href='"+value.url+"'>" + value.title + "</a></li>");
            });
            

        });
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="sidebar-wrapper">
                    <ul class="sidebar-nav">
                    </ul>
 </div>