如何显示JSON对象的HTML? [英] How to display json object to html?
本文介绍了如何显示JSON对象的HTML?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的JSON对象是这样的:
My Json Object is like this :
[{
"attributes": {
"Code": "SGL",
"Total": "19421340.27"
},
"DayPrice": [{
"Date": "2016-07-22",
"Rate": "4900439.85"
}, {
"Date": "2016-07-23",
"Rate": "4845150.21"
}, {
"Date": "2016-07-24",
"Rate": "4845150.21"
}, {
"Date": "2016-07-25",
"Rate": "4830600"
}]
}, {
"attributes": {
"Code": "DBL",
"Total": "6473780.09"
},
"DayPrice": [{
"Date": "2016-07-22",
"Rate": "1633479.95"
}, {
"Date": "2016-07-23",
"Rate": "1615050.07"
}, {
"Date": "2016-07-24",
"Rate": "1615050.07"
}, {
"Date": "2016-07-25",
"Rate": "1610200"
}]
}, {
"attributes": {
"Code": "QUAD",
"Total": "6473780.09"
},
"DayPrice": [{
"Date": "2016-07-22",
"Rate": "1633479.95"
}, {
"Date": "2016-07-23",
"Rate": "1615050.07"
}, {
"Date": "2016-07-24",
"Rate": "1615050.07"
}, {
"Date": "2016-07-25",
"Rate": "1610200"
}]
}]
从JSON对象数组,我想展示这样的图片:
From the json object array, I want display like this image:
我有尝试,但我仍然感到困惑。
我觉得不能这样做。
I had try it, but I'm still confused. I feel it can not be done.
我尝试在循环圈是这样的:
I try loop in loop like this :
countRoomType = json_object.length;
for(var i=0; i<countRoomType; i++){
countDayPrice = json_object[i].DayPrice.length;
for(var j=0; j<countDayPrice; j++){
...
}
}
任何解决方案来解决我的问题?
Any solution to solve my problem?
推荐答案
您可以使用为
遍历对象进行迭代。
You can use for
loop to iterate through the object.
更新
勾选此 FIDDLE
// Create a new blank object
var dateObj = {};
// Iterate original object
for (key in json_object) {
var obj = json_object[key];
var day = obj.DayPrice;
for (dt in day) {
var dtObj = day[dt];
var dtKey = dtObj.Date;
if (dateObj.hasOwnProperty(dtKey)) {
dateObj[dtKey].push({ Code: obj.attributes.Code, Rate: dtObj.Rate });
} else {
dateObj[dtKey] = [{ Code: obj.attributes.Code, Rate: dtObj.Rate }];
}
}
}
// Iterate the newly created object
for(d in dateObj) {
var obj = dateObj[d];
var row = '<tr><td>' + d + '</td><td><ul>';
$.each(obj, function(i, val) {
console.log(val);
row += '<li>' + val.Code + ': ' + val.Rate + '</li>';
});
row += '</ul></td></tr>';
$('#target').find('tbody').append(row);
}
这篇关于如何显示JSON对象的HTML?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文