使用JSON数据在html中填充ul

嗨即时通讯尝试使用JSON在html中填充ul，我已经尝试了很多来自此网站的解决方案，但即时通讯没有太多的运气，任何建议将不胜感激。由于使用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"}]

来源

2015-01-31 n4zg

你扔掉'makeUL'的返回值。您不会将它添加到DOM的任何位置。那么你怎么期待它出现？阅读电脑将是相当可怕的，我认为... – 2015-01-31 20:41:49

感谢您的回复，这是我第一次尝试使用html/javascipt的任何建议。 – n4zg 2015-01-31 20:42:54

你想要的结果是什么？从代码中不清楚您是否想将列表从'source'键的'title'键中移出。另外，makeUL是为了对数组进行操作，但是你在JSON的每个项目上调用它。最后，请提供一个JSON结构的例子。 – amenadiel 2015-01-31 20:45:55

本替换你的循环：

得到你的列表中的一个手柄，因为它已经在你的身体<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/

来源

2015-01-31 21:02:46

hi loanburger，即时通讯仍然没有得到列表中的项目，有什么建议吗？ – n4zg 2015-01-31 21:14:40

如果你仍然有问题，我添加了一个JS小提琴来帮助你展示它。 – 2015-01-31 22:14:55

你能给我一个链接吗？谢谢 – n4zg 2015-01-31 22:16:02

感谢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);  
}     
});

来源

2015-02-02 10:45:40 n4zg

使用JSON数据在html中填充ul

回答

相关问题