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++ )
{ 
    o = data[i];
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(o.title));
    ul.appendChild(li);     
}

您无需使用MakeUL功能

这是一个帮助你的JS小提琴：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

2 个答案: