Question

这是我在javascript中将数据设置为datatable时出现的问题。请参考下面的ajax结果，我将使用java map（java 8 collections）获得这些结果。我尝试将下面的ajax结果设置为datatable。

这是我的json结果。

{
"LT20408":{"7788":56.5},
"LT20607":{"7899":785.0,"7452":134.0},
"LT20310":{"7788":986.0,"7156":122.0,"7452":562.0,"7899":152.25,"7451"=125.0,"7440"=134.25,"7450"=126.0,"7163"=524.0,"7195"=364.0},
"MG20902":{"7899"=785.0},
"MG20702":{"7899"=960.0,"7451"=93.25,"7163"=159.0},
"LT20503":{"7788"=54.52,"7156"=55.62,"7452"=452.25,"7451"=14.25,"7440"=5.36,"7163"=80.25, "7195"=105.25}
}

我需要按照下面的数据表设置上面的ajax数据结果。

-----------------------------------------------------------------------------------------------
|  Code     |   7788 |   7156 |   7452 |   7899  |   7451 |   7440 |   7450 |   7163 |   7195 |
-----------------------------------------------------------------------------------------------
|  LT20408  |  56.50 |   0.00 |   0.00 |   0.00  |   0.00 |   0.00 |   0.00 |   0.00 |   0.00 |
-----------------------------------------------------------------------------------------------
|  LT20607  |   0.00 |   0.00 | 134.00 |   0.00  |   0.00 |   0.00 |   0.00 |   0.00 |   0.00 |
-----------------------------------------------------------------------------------------------
|  LT20310  | 986.00 | 122.00 | 562.00 | 152.25  | 125.00 | 134.25 | 126.00 | 524.00 | 364.00 |
-----------------------------------------------------------------------------------------------
|  MG20902  |   0.00 |   0.00 |   0.00 | 785.00  |   0.00 |   0.00 |   0.00 |   0.00 |   0.00 |
-----------------------------------------------------------------------------------------------
|  MG20702  |   0.00 |   0.00 |   0.00 | 960.00  |  93.25 |   0.00 |   0.00 | 159.00 |   0.00 |
-----------------------------------------------------------------------------------------------
|  LT20503  |  54.52 |  55.62 | 452.25 |   0.00  |  14.25 |   5.36 |   0.00 |  80.25 | 105.25 |
-----------------------------------------------------------------------------------------------

请给我更好的方法，将上述json结果设置为我的数据表。

Answer 1

您需要将JSON格式设置为更具可读性的格式。不过，这就是您所需要的。

var data={
"LT20408":{"7788":56.5},
"LT20607":{"7899":785.0,"7452":134.0},
"LT20310":{"7788":986.0,"7156":122.0,"7452":562.0,"7899":152.25,"7451":125.0,"7440":134.25,"7450":126.0,"7163":524.0,"7195":364.0},
"MG20902":{"7899":785.0},
"MG20702":{"7899":960.0,"7451":93.25,"7163":159.0},
}

var maxCodes=0,getKey,htmlText='';
for (var key in data) {
var tr=`<tr>
    <td>${key}</td>`;
	for(var k2 in data[key]){
  	tr=tr+`<td>${data[key][k2]}</td>`
  }
    
  tr=tr+`</tr>`;
  htmlText=htmlText+tr;
	if(Object.keys(data[key]).length>=maxCodes){
		maxCodes=Object.keys(data[key]).length;
		getKey=key;
	}
}
var tr="<tr><th>Code </th>";
for(var key in data[getKey]){
	tr=tr+`<th>${data[getKey][key]}</th>`;
}
 tr=tr+`</th>`;
$("#tableId").html(tr+htmlText)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" id='tableId'>
   
</table>

Answer 2

那很有趣，并阻止了我在等待某些东西时发疯，以下内容毫无疑问是ES6，所以您可能希望通过babel来运行它：

let d = `{
"LT20408":{"7788":56.5},
"LT20607":{"7899":785.0,"7452":134.0},
"LT20310":{"7788":986.0,"7156":122.0,"7452":562.0,"7899":152.25,"7451"=125.0,"7440"=134.25,"7450"=126.0,"7163"=524.0,"7195"=364.0},
"MG20902":{"7899"=785.0},
"MG20702":{"7899"=960.0,"7451"=93.25,"7163"=159.0},
"LT20503":{"7788"=54.52,"7156"=55.62,"7452"=452.25,"7451"=14.25,"7440"=5.36,"7163"=80.25, "7195"=105.25}
}`;

d = JSON.parse(d.replace(/\=/g, ":"));
const c = new Set(Object.keys(d).reduce((a,b)=>a.concat(Object.keys(d[b])),[]));
const data = [];
const columns = [{title: "Code", data: "code"}];
c.forEach(i => columns.push({title: i, data: i, defaultContent:""}));
columns.sort((a,b) => (a.title === "Code" || b.title === "Code") ? -1 : ~~a.title - ~~b.title);
for(e in d){
    d[e].code = e;
  data.push(d[e]);
}
const example = $("#example").DataTable({columns, data});

正在工作的JSFiddle here。

如何在JavaScript中将ajax数据设置为数据表

2 个答案: