[英]From json to ul li
I'm trying to parse json to ul li. 我正在尝试解析json到ul li。 here's my json: 这是我的json:
var data = {"resultDescription":"SUCCESS","data":[{"orderNum":"A000","userName":"Oswaldo","value":504.74,"qty":3.0},{"orderNum":"A001","userName":"Mao","value":529.17,"qty":6.0},{"orderNum":"A002","userName":"Angeline","value":553.6,"qty":9.0},{"orderNum":"A003","userName":"Gerardo","value":578.03,"qty":12.0},{"orderNum":"A004","userName":"Nicki","value":602.46,"qty":15.0}]}
and I'm trying to parse it with that code: 我正在尝试用该代码解析它:
$.each(data.data, function (index, item) {
html += "<ul>";
console.log(item);
$.each(item.data, function (index1, item1) {
html += "<li>" + orderNum + "</li>";
html += "<li>" + qty + "</li>";
html += "<li>" + userName + "</li>";
html += "<li>" + value + "</li>";
});
html += "</ul>";
});
What am I doing wrong? 我究竟做错了什么?
Why do you have an additional $.each
为什么你还有额外的$.each
$.each(item.data, function (index1, item1) {
See the below. 见下文。 Demo : 演示:
var data = {"resultDescription":"SUCCESS","data":[{"orderNum":"A000","userName":"Oswaldo","value":504.74,"qty":3.0},{"orderNum":"A001","userName":"Mao","value":529.17,"qty":6.0},{"orderNum":"A002","userName":"Angeline","value":553.6,"qty":9.0},{"orderNum":"A003","userName":"Gerardo","value":578.03,"qty":12.0},{"orderNum":"A004","userName":"Nicki","value":602.46,"qty":15.0}]} var html = ""; $.each(data.data, function (index, item) { html += "<ul>"; console.log(item); //$.each(item.data, function (index1, item1) { html += "<li>" + item.orderNum + "</li>"; html += "<li>" + item.qty + "</li>"; html += "<li>" + item.userName + "</li>"; html += "<li>" + item.value + "</li>"; //}); html += "</ul>"; }); setTimeout(function() { $(".container").append(html); }, 1500);
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"></div>
http://jsfiddle.net/kishoresahas/2012qo9u/1/ http://jsfiddle.net/kishoresahas/2012qo9u/1/
var html = "";
$.each(data.data, function (index, item) {
html += "<ul>";
console.log(item);
html += "<li>" + item.orderNum + "</li>";
html += "<li>" + item.qty + "</li>";
html += "<li>" + item.userName + "</li>";
html += "<li>" + item.value + "</li>";
html += "</ul>";
});
setTimeout(function () {
$(".container").append(html);
}, 1500);
Try this 尝试这个
You are already getting the data from data
here $.each(data.data, function (index, item) {
no need for another iterate. 您已经从data
获取数据$.each(data.data, function (index, item) {
不需要另一个迭代。
Remove second $.each
and the item in front like 'item.ordernum'. 删除第二个$.each
和前面的项目,如'item.ordernum'。 Check out this Fiddle : 看看这个小提琴 :
Here is the updated code: 这是更新的代码:
var html = "";
$.each(data.data, function (index, item) {
console.log(data.data)
html += "<ul>";
html += "<li>" + item.orderNum + "</li>";
html += "<li>" + item.qty + "</li>";
html += "<li>" + item.userName + "</li>";
html += "<li>" + item.value + "</li>";
html += "</ul>";
});
setTimeout(function() {
$(".container").append(html);
}, 1500);
The reason we are asking you to remove is because item.data
contains nothing and you can apply $.each on arrays, Also the item is an Object so you can access it directly. 我们要求您删除的原因是因为item.data
包含任何内容,您可以在数组上应用$ .each,该项也是一个Object,因此您可以直接访问它。
Above answers are correct. 以上答案是正确的。 But you can use jquery to build the html elements, rather than creating it by string concatenation. 但是你可以使用jquery来构建html元素,而不是通过字符串连接来创建它。
$.each(data.data, function (index, item) {
var ul = $("<ul/>");
var li = $("<li/>", { text: item.orderNum });
ul.append(li);
ul.append(li.clone().text(item.qty));
ul.append(li.clone().text(item.userName));
ul.append(li.clone().text(item.value));
$(".container").append(ul);
});
I found 2 errors 我发现了2个错误
1- $.each(item.data
should be $.each(item
the inner loop 1- $.each(item.data
应该是$.each(item
内循环
2- inside inner loop orderNum
should be item1.orderNum
and same for other items below it as 2-内部循环orderNum
应该是item1.orderNum
,对于它下面的其他项目也是如此
var html = "";
$.each(data.data, function (index, item) {
html += "<ul>";
console.log(item);
$.each(item, function (index1, item1) {
html += "<li>" + item1.orderNum + "</li>";
html += "<li>" + item1.qty + "</li>";
html += "<li>" + item1.userName + "</li>";
html += "<li>" + item1.value + "</li>";
});
html += "</ul>";
});
setTimeout(function() {
$(".container").html(html);
}, 1500);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.