[英]creating a shopping list with a json file
好的,所以我有我的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数组并用它创建一个待办事项列表; 但是,我有显示数组的困难,所以我可以将它们添加到列表项
这是解决方案: 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);
}
这与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>');
});
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];
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.