Javascript 如何将json对象显示为html？_Javascript_Jquery_Html_Arrays_Json

Javascript 如何将json对象显示为html？

javascript jquery html arrays json

Javascript 如何将json对象显示为html？,javascript,jquery,html,arrays,json,Javascript,Jquery,Html,Arrays,Json,我的Json对象如下所示： [{ "attributes": { "Code": "SGL", "Total": "19421340.27" }, "DayPrice": [{ "Date": "2016-07-22", "Rate": "4900439.85" }, { "Date": "2016-07-23", "Rate": "4845150.21" },

我的Json对象如下所示：

[{
    "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"
    }]
}]

countRoomType = json_object.length;
for(var i=0; i<countRoomType; i++){ 
    countDayPrice = json_object[i].DayPrice.length;
    for(var j=0; j<countDayPrice; j++){
        ...
    }
}

从json对象数组中，我希望显示如下图像：

我试过了，但我还是很困惑。我觉得这是办不到的

我尝试这样的循环：

[{
    "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"
    }]
}]

countRoomType = json_object.length;
for(var i=0; i<countRoomType; i++){ 
    countDayPrice = json_object[i].DayPrice.length;
    for(var j=0; j<countDayPrice; j++){
        ...
    }
}

countRoomType=json\u object.length；
对于（var i=0；i您可以使用for
循环来迭代对象
更新
检查这个
//创建一个新的空白对象
var dateObj={}；
//迭代原始对象
for（输入json_对象）{
var obj=json_对象[key]；
var日=目标日价格；
用于（日内的dt）{
var dtObj=日[dt]；
var dtKey=dtObj.Date；
if（dateObj.hasOwnProperty（dtKey））{
dateObj[dtKey].push（{Code:obj.attributes.Code，Rate:dtObj.Rate}）；
}否则{
dateObj[dtKey]=[{Code:obj.attributes.Code，Rate:dtObj.Rate}]；
}
}
}
//迭代新创建的对象
用于（日期对象中的d）{
var obj=dateObj[d]；
变量行=''+d+''；
$。每个（对象、功能（i、val）{
控制台日志（val）；
行+=''+val.Code+'：'+val.Rate+''；
});
行+=''；
$（'#target'）。查找（'tbody'）。追加（行）；
}
您可以使用for
循环遍历对象
更新
检查这个
//创建一个新的空白对象
var dateObj={}；
//迭代原始对象
for（输入json_对象）{
var obj=json_对象[key]；
var日=目标日价格；
用于（日内的dt）{
var dtObj=日[dt]；
var dtKey=dtObj.Date；
if（dateObj.hasOwnProperty（dtKey））{
dateObj[dtKey].push（{Code:obj.attributes.Code，Rate:dtObj.Rate}）；
}否则{
dateObj[dtKey]=[{Code:obj.attributes.Code，Rate:dtObj.Rate}]；
}
}
}
//迭代新创建的对象
用于（日期对象中的d）{
var obj=dateObj[d]；
变量行=''+d+''；
$。每个（对象、功能（i、val）{
控制台日志（val）；
行+=''+val.Code+'：'+val.Rate+''；
});
行+=''；
$（'#target'）。查找（'tbody'）。追加（行）；
}
您可以使用

var json\u对象=[{
“属性”：{
“代码”：“SGL”，
“总计”：“19421340.27”
},
“日价格”：[{
“日期”：“2016-07-22”，
“费率”：“4900439.85”
}, {
“日期”：“2016-07-23”，
“费率”：“4845150.21”
}, {
“日期”：“2016-07-24”，
“费率”：“4845150.21”
}, {
“日期”：“2016-07-25”，
“费率”：“4830600”
}]
}, {
“属性”：{
“代码”：“DBL”，
“总计”：“6473780.09”
},
“日价格”：[{
“日期”：“2016-07-22”，
“比率”：“1633479.95”
}, {
“日期”：“2016-07-23”，
“费率”：“1615050.07”
}, {
“日期”：“2016-07-24”，
“费率”：“1615050.07”
}, {
“日期”：“2016-07-25”，
“费率”：“1610200”
}]
}, {
“属性”：{
“代码”：“四边形”，
“总计”：“6473780.09”
},
“日价格”：[{
“日期”：“2016-07-22”，
“比率”：“1633479.95”
}, {
“日期”：“2016-07-23”，
“费率”：“1615050.07”
}, {
“日期”：“2016-07-24”，
“费率”：“1615050.07”
}, {
“日期”：“2016-07-25”，
“费率”：“1610200”
}]
}];
//生成用于轻松生成表的对象
var res={}；
forEach（函数（v，i）{
var code=v.attributes.code；//获取属性代码的值
v、 DayPrice.forEach（函数（v1）{
var date=v1.date；//从内部对象获取日期值
res[date]=res[date]| |{}；//如果不是，则用日期初始化对象
res[date][code]=v1.Rate；//添加代码值
});
});
//使用生成的对象生成tr和td
$（'#table'）.html（$.map（res，function（v，i）{//迭代生成的对象
返回$（''，{//generate tr
html:[$（''，{//生成第一列
text:i//将第一列值设置为日期（键）
})，$（''，{//生成第二列
html:$.map（v，函数（i1，v1）{//迭代内部ibject以生成第二列内容
返回i1+'：'+v1+'（每个房间）；//生成第二列内容
}).join（“
”）//使用br标记分隔每一行
})]
})
}))
您可以使用

var json\u对象=[{
“属性”：{
“代码”：“SGL”，
“总计”：“19421340.27”
},
“日价格”：[{
“日期”：“2016-07-22”，
“费率”：“4900439.85”
}, {
“日期”：“2016-07-23”，
“费率”：“4845150.21”
}, {
“日期”：“2016-07-24”，
“费率”：“4845150.21”
}, {
“日期”：“2016-07-25”，
“费率”：“4830600”
}]
}, {
“属性”：{
“代码”：“DBL”，
“总计”：“6473780.09”
},
“日价格”：[{
“日期”：“2016-07-22”，
“比率”：“1633479.95”
}, {
“日期”：“2016-07-23”，
“费率”：“1615050.07”
}, {
“日期”：“2016-07-24”，
“费率”：“1615050.07”
}, {
“日期”：“2016-07-25”，
“费率”：“1610200”
}]
}, {
“属性”：{
“代码”：“四边形”，
“总计”：“6473780.09”
},
“日价格”：[{
“日期”：“2016-07-22”，
“比率”：“1633479.95”
}, {
“日期”：“2016-07-23”，
“费率”：“1615050.07”
}, {
“日期”：“2016-07-24”，
“费率”：“1615050.07”
}, {
“日期”：“2016-07-25”，
“费率”：“1610200”
}]
}];
//生成用于轻松生成表的对象
var res={}；
forEach（函数（v，i）{
var code=v.attributes.code；//获取属性代码的值
v、 DayPrice.forEach（函数（v1）{
var date=v1.date；//从内部对象获取日期值
res[date]=res[date]| |{}；//如果不是，则用日期初始化对象
res[date][code]=v1.Rate；//添加代码值
});
});
//使用生成的对象生成tr和td
$（'#table'）.html（$.map（res，function（v，i）{//迭代生成的对象
返回$（''，{//generate tr
html:[$（''，{//生成第一列
text:i//将第一列值设置为日期（键）
})，$（''，{//生成第二列
html:$.map（v，函数（i1，v1）{//迭代内部ibject以生成第二列内容
返回i1+'：'+v1+'（每个房间）；//生成
var myObj = {};

json_object.forEach(function(v,i){
          v.DayPrice.forEach(function(vv,ii){
              var date = vv.Date;
              var rate = vv.Rate;
              var code = v.attributes.Code;
              var Total = v.attributes.Total;

              if(date in myObj){
               myObj[date].push({'code':code, 'rate':rate});                   
              }else{
               myObj[date] = [];
              }

        })})

for(key in myObj){
 //append the key asd value in the desired html element.
 myObj[key].forEach(function(v,i){
 var code = v.code;
 var rate = v.rate;
 //append code and rate to the corresponding html element
});

}