1

さて、私は私の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 配列を取得し、それを使用して to-do リストを作成することです。ただし、配列を表示するのが難しいので、配列をリスト項目に追加できます

4

3 に答える 3

2

ここに解決策があります：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);
}
于 2013-10-24T22:31:33.227 に答える
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

于 2013-10-24T22:43:03.787 に答える
1 
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];
        }
    }
}
于 2013-10-24T22:36:06.773 に答える