[英]plot json data on html table using ajax response
this is the sample json:这是样品 json:
[
{
"datetime": "2020-07-01T00:00:00",
"params": [
{
"parameterName": "Temperature",
"value": 20,
"color": "Green"
},
{
"parameterName": "PH Level",
"value": 86,
"color": "Green"
},
{
"parameterName": "Partical Level",
"value": 2,
"color": "Green"
},
{
"parameterName": "Oxygen Level",
"value": 8897,
"color": "Green"
},
{
"parameterName": "Salinity",
"value": 8849,
"color": "Green"
}
]
},
{
"datetime": "2020-07-01T01:00:00",
"params": [
{
"parameterName": "Temperature",
"value": 21,
"color": "Green"
},
{
"parameterName": "PH Level",
"value": 85,
"color": "Green"
},
{
"parameterName": "Partical Level",
"value": 3,
"color": "Green"
},
{
"parameterName": "Oxygen Level",
"value": 8895,
"color": "Green"
},
{
"parameterName": "Salinity",
"value": 8847,
"color": "Green"
}
]
}
]
now i need to convert this json to html data table which should be looking like this:现在我需要将此 json 转换为 html 数据表,它应该如下所示:
date | Temperature | PH Level | Partical Level | Oxygen Level | Salinity
2020-07-01T00:00:00 | 20 | 86 | 2 | 8897 | 8849
search and other things are handled by javascript, what I need is the structure only where datetime will be row and column names will be the parameterName attribute.搜索和其他事情由 javascript 处理,我需要的是结构,其中datetime将是行名,列名将是parameterName属性。 In one word the table should be looking like this
总之,表格应该是这样的
// these is used for changing params items to simple key value pair object
function simplify(obj){
let newobj={} ;
newobj[obj.parameterName] = obj.value;
return newobj;
}
// these use simplified key value pairs to make row object
function makeRow(obj) {
let newobj={datetime: JsonResponse.datetime}
// JsonResponse is your response
JsonResponse.params.foreach(function(item) {
newobj = { ...newobj, ...simplify(item) } ;
} ) ;
return newobj;
}
// flattened object
let NewJson = JsonResponse.map(function(item){
return makeRow(item)
} ) ;
That concludes the hard part NewJson should be flattened object you can use that to fill table using javascript到此为止,NewJson 的难点应该被展平 object 您可以使用它来使用 javascript 填充表格
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.