如何使用jquery DOM选择器显示JSON数据? [英] How to display JSON data using jquery DOM selector?
本文介绍了如何使用jquery DOM选择器显示JSON数据?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在我的网站上显示每个新闻的 json.articles [i] .title
这里是我的网站截图和我的代码:
I want to display json.articles[i].title
of each news on my website here is my screenshot of website and my code:
在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代码)。
Here is my screenshot of website I want to display each news title from json.articles[].title
instead of "Your news title".(For clarification see screenshot and HTML code).
推荐答案
尝试下面的代码
(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>
这篇关于如何使用jquery DOM选择器显示JSON数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文