如何动态操作 javascript 中的 json 数据？

Question

以下是我点击 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 的每个对象映射到适当的行中？？任何人都可以帮助我吗？没有行可能会动态增加。exapmle 现在它是 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>

Answer 1

只是为了做图，可以用这个解决方法。

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>');

Answer 2

遍历你的 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/ 示例 google 图表，但我根本不知道 google 图表，所以您可能可以使用它来解决您的问题

EDIT2

http://jsfiddle.net/mg2qtato/1/;)

EDIT3

Full example

Answer 3

请运行此代码，其中变量 '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);

Answer 4

您必须使用 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);

如何动态操作 javascript 中的 json 数据？

how to manupulate json data in javascript dynamically?

javascript

json

google-visualization

getjson