如何在javascript中动态操作json数据
how to manupulate json data in javascript dynamically?
以下是我点击url时的json数据。
[
{
"date": "07-APR-16",
"total": 6,
"acceptedCount": 0,
"submittedCount": 0,
"rejectedCount": null,
"createdCount": 1
},
{
"date": "03-APR-16",
"total": 2,
"acceptedCount": 0,
"submittedCount": 0,
"rejectedCount": null,
"createdCount": 2
},
{
"date": "06-APR-16",
"total": 13,
"acceptedCount": 0,
"submittedCount": 5,
"rejectedCount": null,
"createdCount": 0
},
{
"date": "01-APR-16",
"total": 20,
"acceptedCount": 0,
"submittedCount": 13,
"rejectedCount": null,
"createdCount": 0
},
{
"date": "29-MAR-16",
"total": 10,
"acceptedCount": 0,
"submittedCount": 8,
"rejectedCount": null,
"createdCount": 0
},
{
"date": "04-APR-16",
"total": 5,
"acceptedCount": 0,
"submittedCount": 3,
"rejectedCount": null,
"createdCount": 0
},
{
"date": "31-MAR-16",
"total": 30,
"acceptedCount": 0,
"submittedCount": 28,
"rejectedCount": null,
"createdCount": 0
},
{
"date": "30-MAR-16",
"total": 5,
"acceptedCount": 0,
"submittedCount": 4,
"rejectedCount": null,
"createdCount": 0
}
]
以下是我的javascript 的一部分
var data = google.visualization.arrayToDataTable([
['Day', 'Submitted', 'Accepted', 'Rejected', 'Created'],
['29-MAR-16', 100, 410, 230, 40],
['30-MAR-16', 170, 346, 302, 430],
['31-MAR-16', 60, 100, 130, 40],
['1-APRIL-16', 302, 350, 520, 40]
]);
我应该如何将json的每个对象映射到适当的行中??有人能帮我吗?行数可能会动态增加。例如,现在是4,可能过一段时间后会变成8,这取决于json数据
我添加了我的html文件,你能给我完整的解决方案吗。
<!DOCTYPE html>
<html>
<head>
<title>Analytics of Payment Service</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart", "bar"]
});
google.setOnLoadCallback(function(){
drawChart()
drawChart3()
drawChart2()
})
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Day', 'Submitted', 'Published', 'Rejected', 'Created'],
['29-MAR-16', 100, 410, 230, 40],
['30-MAR-16', 170, 346, 302, 430],
['31-MAR-16', 60, 100, 130, 40],
['1-APRIL-16', 302, 350, 520, 40]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal', // Required for Material Bar Charts.
hAxis: {
format: 'decimal'
},
height: 500,
colors: ['#1b9e77', '#d95f02', '#7570b3', '#db7f0b']
};
var chart = new google.charts.Bar(document.getElementById('chart_div1'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
function drawChart3() {
var data3 = google.visualization.arrayToDataTable([
['Day', 'Sales'],
['4-APRIL-16', 1000],
['5-APRIL-16', 1170],
['6-APRIL-16', 660],
['7-APRIL-16', 1030]
]);
var options3 = {
title: 'Company Performance',
curveType: 'function',
legend: {
position: 'bottom'
}
};
var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart3.draw(data3, options3);
}
function drawChart2() {
var data2 = google.visualization.arrayToDataTable([
['Day', 'CreaditCard', 'Invoice'],
['4-APRIL-16', 1000, 400],
['5-APRIL-16', 1170, 460],
['6-APRIL-16', 660, 1120],
['7-APRIL-16', 1030, 540]
]);
var options2 = {
title: 'CreaditCard/Invoice Details',
curveType: 'function',
legend: {
position: 'bottom'
}
};
var chart2 = new google.visualization.LineChart(document.getElementById('cc/invoice'));
chart2.draw(data2, options2);
}
</script>
</head>
<body>
<div id="chart_div1" style="width: 900px; height: 500px;"></div>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
<div id="cc/invoice" style="width: 900px; height: 500px"></div>
#foreach($item in ${chartBarForSubmittedManid})
count=$!{item.count}
#end
</body>
</html>
您必须使用jQuery、JSON等解析JSON响应数据(URL返回的数据)。
var listOfData = $.parseJSON(responsedata); //jQuery
var listOfData = JSON.parse(responsedata); // JSON
listOfData将是一个包含对象的数组。您需要循环到它中来构建您要针对的数组输出。
var outputArray = new Array();
// header
var headerArray = ['Day', 'Submitted', 'Accepted', 'Rejected', 'Created'];
outputArray.push(headerArray);
for (var i = 0; i < listOfData.length; i++){
var obj = listOfData[i];
var innerArray = new Array();
innerArray[0] = obj.date;
innerArray[1] = obj.submittedCount;
innerArray[2] = obj.acceptedCount;
innerArray[3] = obj.rejectedCount;
innerArray[4] = obj.createdCount;
outputArray.push(innerArray);
}
现在,使用这行代码的输出
var data = google.visualization.arrayToDataTable(outputArray);
在json上循环并将每个对象作为数组推送:
var array = []
array.push(['Day', 'Submitted', 'Accepted', 'Rejected', 'Created']);
for(var i = 0; i < json.length ; i++){
arr = [json[i].date,json[i].total,json[i].acceptedCount,json[i].submittedCount,json[i].rejectedCount,json[i].createdCount];
array.push(arr);
}
var json = [
{
"date": "07-APR-16",
"total": 6,
"acceptedCount": 0,
"submittedCount": 0,
"rejectedCount": null,
"createdCount": 1
},
{
"date": "03-APR-16",
"total": 2,
"acceptedCount": 0,
"submittedCount": 0,
"rejectedCount": null,
"createdCount": 2
},
{
"date": "06-APR-16",
"total": 13,
"acceptedCount": 0,
"submittedCount": 5,
"rejectedCount": null,
"createdCount": 0
},
{
"date": "01-APR-16",
"total": 20,
"acceptedCount": 0,
"submittedCount": 13,
"rejectedCount": null,
"createdCount": 0
},
{
"date": "29-MAR-16",
"total": 10,
"acceptedCount": 0,
"submittedCount": 8,
"rejectedCount": null,
"createdCount": 0
},
{
"date": "04-APR-16",
"total": 5,
"acceptedCount": 0,
"submittedCount": 3,
"rejectedCount": null,
"createdCount": 0
},
{
"date": "31-MAR-16",
"total": 30,
"acceptedCount": 0,
"submittedCount": 28,
"rejectedCount": null,
"createdCount": 0
},
{
"date": "30-MAR-16",
"total": 5,
"acceptedCount": 0,
"submittedCount": 4,
"rejectedCount": null,
"createdCount": 0
}
]
var array = []
array.push(['Day', 'Submitted', 'Accepted', 'Rejected', 'Created']);
for(var i = 0; i < json.length ; i++){
arr = [json[i].date,json[i].total,json[i].acceptedCount,json[i].submittedCount,json[i].rejectedCount,json[i].createdCount];
array.push(arr);
}
document.getElementById('arraY').innerHTML = JSON.stringify(array,null,4)
<pre id="arraY">
</pre>
https://jsfiddle.net/37urrtLt/
编辑:
http://jsfiddle.net/srrrn9sa/282/谷歌图表的例子,但我根本不知道谷歌图表,所以你可能可以用它来解决你的问题
EDIT2
http://jsfiddle.net/mg2qtato/1/;)
EDIT3
完整示例
只需映射,就可以使用此解决方案。
var array = [{ "date": "07-APR-16", "total": 6, "acceptedCount": 0, "submittedCount": 0, "rejectedCount": null, "createdCount": 1 }, { "date": "03-APR-16", "total": 2, "acceptedCount": 0, "submittedCount": 0, "rejectedCount": null, "createdCount": 2 }, { "date": "06-APR-16", "total": 13, "acceptedCount": 0, "submittedCount": 5, "rejectedCount": null, "createdCount": 0 }, { "date": "01-APR-16", "total": 20, "acceptedCount": 0, "submittedCount": 13, "rejectedCount": null, "createdCount": 0 }, { "date": "29-MAR-16", "total": 10, "acceptedCount": 0, "submittedCount": 8, "rejectedCount": null, "createdCount": 0 }, { "date": "04-APR-16", "total": 5, "acceptedCount": 0, "submittedCount": 3, "rejectedCount": null, "createdCount": 0 }, { "date": "31-MAR-16", "total": 30, "acceptedCount": 0, "submittedCount": 28, "rejectedCount": null, "createdCount": 0 }, { "date": "30-MAR-16", "total": 5, "acceptedCount": 0, "submittedCount": 4, "rejectedCount": null, "createdCount": 0 }],
newArray = function (array, titles, cols) {
var r = [titles];
array.forEach(function (a) {
r.push(cols.map(function (b) {
return a[b];
}));
})
return r;
}(array, ['Day', 'Submitted', 'Accepted', 'Rejected', 'Created'], ['date', 'submittedCount', 'acceptedCount', 'rejectedCount', 'createdCount'])
document.write('<pre>' + JSON.stringify(newArray, 0, 4) + '</pre>');
请运行以下代码,其中变量"a"表示json数组:
var aTemp1 = ['Day','Submitted','Accepted','Rejected','Created'];
var aMain = [];
aMain.push(aTemp1);
console.log(aMain);
$.each(a, function(ind, val) {
var _date = val.date;
var _sub = val.submittedCount;
var _acc = val.acceptedCount;
var _rej = val.rejectedCount;
var _cre = val.createdCount;
var aTemp = [_date, _sub, _acc, _rej, _cre];
aMain.push(aTemp);
});
console.log(aMain);
相关文章:
- 我应该如何将响应数据保存在对象(json)中以获得更好的操作和性能
- 使用Angular JS for WordPress JSON API使用JSON操作数据
- 排序和操作json对象,javascript
- 使用LoDash操作JSON
- 将JSON对象列表传递给操作
- 如何在javascript中动态操作json数据
- 如何操作JSON对象以删除Javascript中的根键
- 用javascript格式化/操作JSON响应
- 使用 JQuery 或 Javascript 操作 JSON
- 如何在 Web 服务器中操作 JSON 类型
- 使用 jquery 操作 JSON 数组
- 如何在 JavaScript 中操作 JSON 数据而不会产生副作用
- 如何操作JSON数据
- 操作JSON对象:如何引用和更新嵌套值
- 在选择更改时操作Json数组
- jquery每次循环dom操作(JSON)
- 在Google Maps API V3中操作JSON数据以创建lat/lngs的javascript数组
- 在客户端操作JSON数据
- 正确操作JSON数据以创建D3区域图
- 哪些库可用于在JavaScript中操作JSON数据