用 JSON 数据填充 html 中的 ul

Question

您好，我正在尝试用 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>

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&amp;ns_mchannel=rss&amp;ns_campaign=1490",
"image":"http:\/\/i.dailymail.co.uk\/i\/pix\/m_logo_154x115px.png"}]

Answer 1

用这个替换你的循环：

掌握您的列表，因为它已经在您的体内 <ul id="ct"></ul>:

var ul = document.getElementById("ct");

然后使用 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);     
}

不需要你的 MakeUL 功能

这里有一个JS Fiddle可以帮助你：http://jsfiddle.net/loanburger/6nrx1zkj/

Answer 2

多亏了 loanburgers 的解决方案，我的代码才能正常工作需要声明 o 变量。

var ul = document.getElementById("ct");

 for( var i = 0; i < data.length; i++ )
 { 
    var o = data[i];
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(o.title));
    ul.appendChild(li);    
 }                   
});

用 JSON 数据填充 html 中的 ul

Populate ul in html with JSON data

javascript

jquery

json

html-lists