Question

好的，我有我的json文件：

[
 {"task":"get milk","who":"Scott","dueDate":"2013-05-19","done":false},
 {"task":"get broccoli","who":"Elisabeth","dueDate":"2013-05-21","done":false},
 {"task":"get garlic","who":"Trish","dueDate":"2013-05-30","done":false},
 {"task":"get eggs","who":"Josh","dueDate":"2013-05-15","done":true}
]

和我的html / jquery文件：

<!DOCTYPE html>
<html>
    <head>
        <title>To do List</title>
        <meta charset="utf-8">
        <style>
        </style>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script> 
            $("document").ready(function() {
                $.getJSON("todo.json", function(data) {
                    console.log("Data loaded successfully");
                });
            });
        </script>
    </head>
    <body>
        <div id="list">
            <ul class="list-items">
            </ul>
        </div>
    </body>
</html>

我要做的是抓住每个json数组并用它创建一个待办事项列表;但是，我很难显示数组，所以我可以将它们添加到列表项

Answer 1

这是解决方案：http://jsfiddle.net/x4vuB/1/

HTML

<div>
<ul id="myList">
    </ul>
</div>

JS

var myJSON = [
 {"task":"get milk","who":"Scott","dueDate":"2013-05-19","done":false},
 {"task":"get broccoli","who":"Elisabeth","dueDate":"2013-05-21","done":false},
 {"task":"get garlic","who":"Trish","dueDate":"2013-05-30","done":false},
 {"task":"get eggs","who":"Josh","dueDate":"2013-05-15","done":true}
] 
var myList=document.getElementById('myList');
for(var counter = 0; counter < myJSON.length; counter++) {
 var myListItem = document.createElement('li');
 var myListElement = document.createElement('div');
    myListElement.innerHTML = "Name: "+myJSON[counter].who;
    myListElement.innerHTML += "<br/>"+"Task: "+myJSON[counter].task;
    myListElement.innerHTML += "<br/>"+"Date: "+myJSON[counter].dueDate;
    myListElement.innerHTML += "<br/>"+"Done: "+myJSON[counter].done;
    myListItem.appendChild(myListElement);
    myList.appendChild(myListItem);
}

Answer 2

这与jQuery或多或少相同

HTML：

<ul class="list-items">
</ul>

jQuery的：

var data = [
 {"task":"get milk","who":"Scott","dueDate":"2013-05-19","done":false},
 {"task":"get broccoli","who":"Elisabeth","dueDate":"2013-05-21","done":false},
 {"task":"get garlic","who":"Trish","dueDate":"2013-05-30","done":false},
 {"task":"get eggs","who":"Josh","dueDate":"2013-05-15","done":true}
];

var ul = $('.list-items');
$.each(data, function(i, elem) {
    var text = 'Task: ' + elem.task + ', Name: ' + elem.who + ', Date: ' + elem.dueDate;
    ul.append('<li>' + text + '</li>');
});

JSFiddle

Answer 3

for(var i = 0; i < data.length; i++){
    var the_list = data[i];
    for(l_item in the_list){
        if(the_list.hasOwnProperty(l_item)){
            your_html_here.innerHTML = l_item +":"+ the_list[l_item];
        }
    }
}

使用json文件创建购物清单

3 个答案: