n4z*_*4zg 4 javascript jquery json html-lists
嗨,我正在尝试使用 JSON 填充 html 中的 ul,我已经尝试了该站点的许多解决方案,但我运气不佳,任何建议将不胜感激。谢谢
我的代码:
<script>
$.getJSON('/simplepie/round/alltables.json', function (data) {
var o = null;
var myArray = new Array();
document.open();
for( var i = 0; i < data.length; i++ )
{
o = data[i];
myArray.push('<li>' + o.title + '</li>');
//document.write(o.source + " <br>" + o.description + "<br>") ;
myArray.push(o.source);
makeUL(o.source);
}
//document.close();
// document.write('Latitude: ' + data.id + '\nLongitude: ' + data.title + '\nCountry: ' + data.description);
function makeUL(array) {
var list = document.createElement('ul');
for(var i = 0; i < array.length; i++) {
var item = document.createElement('li');
item.appendChild(document.createTextNode(array[i]));
list.appendChild(item);
}
return list;
}
});
</script>
</head>
<body>
<ul id="ct"></ul>
</body>
Run Code Online (Sandbox Code Playgroud)
JSON 结构
[{"id":"1","source":"Articles | Mail Online",
"time_date":"1422720360",
"title":"Rouhani accuses Iranian hardliners of ",
"description":"DUBAI, Jan 31 (Reuters) - Iranian President Hassan Rouhani",
"link":"http:\/\/www.dailymail.co.uk\/wires\/reuters\/article-2934402\/Rouhani-accuses-Iranian-hardliners-cheering-atom-talks.html?ITO=1490&ns_mchannel=rss&ns_campaign=1490",
"image":"http:\/\/i.dailymail.co.uk\/i\/pix\/m_logo_154x115px.png"}]
Run Code Online (Sandbox Code Playgroud)
用这个替换你的循环:
处理你的 List ,因为它已经在你的身体里了<ul id="ct"></ul>:
var ul = document.getElementById("ct");
Run Code Online (Sandbox Code Playgroud)
然后使用 javascript 创建 li 并将其附加到您的列表中:
for( var i = 0; i < data.length; i++ )
{
var obj = data[i];
var li = document.createElement("li");
li.appendChild(document.createTextNode(obj.title));
ul.appendChild(li);
}
Run Code Online (Sandbox Code Playgroud)
不需要你的 MakeUL 函数
这是一个 JS Fiddle 来帮助你:http : //jsfiddle.net/loanburger/6nrx1zkj/