Javascript 如何使用jquery DOM选择器显示JSON数据？_Javascript_Jquery_Json

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

javascript jquery json

Javascript 如何使用jquery DOM选择器显示JSON数据？,javascript,jquery,json,Javascript,Jquery,Json,我想在我的网站上显示每一条新闻的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()

我想在我的网站上显示每一条新闻的

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代码）

如果您只想对文章进行迭代，可以使用迭代器索引并不断递增。像这样的

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

但是，您最好遍历articles对象并动态创建列表。

如果您只想遍历这些文章，您可以使用迭代器索引并不断递增它。像这样的

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

但是您最好迭代articles对象并动态创建列表。

您应该动态创建

LI

元素，因为JSON响应中的文章数量可能会有所不同

要创建元素，请使用

//缓存ul元素
var ul=$（“#侧栏包装ul.侧栏导航”）；
//迭代文章
$.each（json.articles，函数（索引，文章）{
//创建锚
变量锚=$（''{
href:article.url，
文本：article.title
});
//在将LI附加到UL后创建LI并附加锚定
$（“”）.append（锚）。appendTo（ul）；
});

（函数（）{
$.getJSON（'https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b，函数（json）{
var ul=$（“#侧栏包装ul.侧栏导航”）；
$.each（json.articles，函数（索引，文章）{
变量锚=$（''{
href:article.url，
文本：article.title
});
$（“”）.append（锚）。appendTo（ul）；
});
});
})();

最新标题


您应该动态创建LI
元素，因为JSON响应中的文章数量可能会有所不同
要创建元素，请使用
//缓存ul元素
var ul=$（“#侧栏包装ul.侧栏导航”）；
//迭代文章
$.each（json.articles，函数（索引，文章）{
//创建锚
变量锚=$（''{
href:article.url，
文本：article.title
});
//在将LI附加到UL后创建LI并附加锚定
$（“”）.append（锚）。appendTo（ul）；
});


（函数（）{
$.getJSON（'https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b，函数（json）{
var ul=$（“#侧栏包装ul.侧栏导航”）；
$.each（json.articles，函数（索引，文章）{
变量锚=$（''{
href:article.url，
文本：article.title
});
$（“”）.append（锚）。appendTo（ul）；
});
});
})();

最新标题


尝试下面的代码

（函数（）{
$.getJSON（'https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b，函数（json）{
var html=“”；
$（json.articles）.each（函数（索引、值）{
$（“.sidebar nav”）。追加（“”）；
});
});
})();



尝试下面的代码

（函数（）{
$.getJSON（'https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b，函数（json）{
var html=“”；
$（json.articles）.each（函数（索引、值）{
$（“.sidebar nav”）。追加（“”）；
});
});
})();



您还可以使用类更新li数据
试试这个
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){
    $.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b',function(json) {
        var x=document.getElementsByClassName("title");
        for(var i=0;i<x.length;i++)
            x[i].innerHTML = json.articles[0].titles;
    }); }); </script>

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

$（文档）.ready（函数（）{
$.getJSON（'https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b，函数（json）{
var x=document.getElementsByClassName（“标题”）；
对于（var i=0；i，您还可以使用类更新li数据
试试这个
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){
    $.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b',function(json) {
        var x=document.getElementsByClassName("title");
        for(var i=0;i<x.length;i++)
            x[i].innerHTML = json.articles[0].titles;
    }); }); </script>

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

$（文档）.ready（函数（）{
$.getJSON（'https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=045089075bc74354be01b34f6335d32b，函数（json）{
var x=document.getElementsByClassName（“标题”）；
对于（var i=0；i@rockstone，你为什么要请求upvote，你是来投票的吗？@Diwas Joshi你已经声明了var i=0
，但是如果我想添加图像、描述、新闻标题，我应该为每个迭代单独设置一个变量。开发人员遵循的好做法是什么。@rockstone取决于这些图像、描述的位置。如果这些是在文章中使用的迭代器。你不需要单独使用迭代器。但正如答案所示，动态添加列表会更好。@rockstone，你为什么要请求upvote，你是来投票的吗？@Diwas Joshi你已经声明var i=0
，但是如果我想添加图像、描述、新闻标题，我应该做一个s吗为每个迭代分离变量。开发人员遵循的最佳实践是什么。@rockstone取决于这些图像的位置和描述。如果这些图像在文章中，迭代器可以工作。您不需要为这些图像使用单独的迭代器。但正如答案所示，动态添加列表会更好。但是如果我动态创建LI
元素，它会更好如果我想显示我应该动态创建的图像，那么我的问题是我应该做什么