Question

当我点击url时，以下是我的json数据。

＆＃xA;＆＃xA;

  [＆＃xA; {＆＃XA; “日期”：“07-APR-16”，＆＃xA; “总计”：6，＆＃xA; “acceptedCount”：0，＆＃xA; “submittedCount”：0，＆＃xA; “rejectedCount”：null，＆＃xA; “createdCount”：1＆＃xA;}，＆＃xA; {＆＃xA; “日期”：“03-APR-16”，＆＃xA; “总计”：2，＆＃xA; “acceptedCount”：0，＆＃xA; “submittedCount”：0，＆＃xA; “rejectedCount”：null，＆＃xA; “createdCount”：2＆＃xA;}，＆＃xA; {＆＃xA; “日期”：“06-APR-16”，＆＃xA; “总计”：13，＆＃xA; “acceptedCount”：0，＆＃xA; “submittedCount”：5，＆＃xA; “rejectedCount”：null，＆＃xA; “createdCount”：0＆＃xA;}，＆＃xA; {＆＃xA; “日期”：“01-APR-16”，＆＃xA; “总计”：20，＆＃xA; “acceptedCount”：0，＆＃xA; “submittedCount”：13，＆＃xA; “rejectedCount”：null，＆＃xA; “createdCount”：0＆＃xA;}，＆＃xA; {＆＃xA; “日期”：“29-MAR-16”，＆＃xA; “总计”：10，＆＃xA; “acceptedCount”：0，＆＃xA; “submittedCount”：8，＆＃xA; “rejectedCount”：null，＆＃xA; “createdCount”：0＆＃xA;}，＆＃xA; {＆＃xA; “日期”：“04-APR-16”，＆＃xA; “总计”：5，＆＃xA; “acceptedCount”：0，＆＃xA; “submittedCount”：3，＆＃xA; “rejectedCount”：null，＆＃xA; “createdCount”：0＆＃xA;}，＆＃xA; {＆＃xA; “日期”：“31-MAR-16”，＆＃xA; “总计”：30，＆＃xA; “acceptedCount”：0，＆＃xA; “submittedCount”：28，＆＃xA; “rejectedCount”：null，＆＃xA; “createdCount”：0＆＃xA;}，＆＃xA; {＆＃xA; “日期”：“30-MAR-16”，＆＃xA; “总计”：5，＆＃xA; “acceptedCount”：0，＆＃xA; “submittedCount”：4，＆＃xA; “rejectedCount”：null，＆＃xA; “createdCount”：0＆＃xA; }＆＃xA;]＆＃xA;

＆＃xA;＆＃xA;

以下是我的javascript的一部分

＆＃xA;＆＃xA;

  var data = google.visualization.arrayToDataTable（[＆＃xA; ['Day'，'Submitted'，'Accepted'，'Rejected'，'Created']，＆＃xA; ['29 -MAR-16 '，100,410,230,40]，＆＃xA; ['30 -MAR-16'，170,346,302,430]，＆＃xA; ['31 -MAR-16'，60,100， 130,40]，＆＃xA; ['1-APRIL-16'，302,350,520,40]＆＃xA;]）;＆＃xA;

＆＃xA;＆ #xA;

我应该如何在适当的行中映射json的每个对象??＆＃xA;任何人都可以帮助我吗？没有行可以动态增加.exapmle现在是4可能在一段时间后它可能变为8它依赖于json数据

＆＃xA;＆＃xA;

我添加了我的html文件你能不能给我满解决方案。＆＃xA;

＆＃xD;＆＃xA;

＆＃xD; ＆＃xA;

 ＆lt;！DOCTYPE html＆gt;＆＃xD;＆＃xA;＆lt; html＆gt;＆＃xD;＆＃xA ;＆LT; HEAD＆GT;＆＃的xD;＆＃XA; ＆lt; title＆gt;付款服务的分析＆lt; / title＆gt;＆＃xD;＆＃xA;＆lt; script type =“text / javascript”src =“https://www.google.com/jsapi”＆gt;＆lt; /脚本＆GT;＆＃的xD;＆＃XA; ＆lt; script type =“text / javascript”＆gt;＆＃xD;＆＃xA; google.load（“可视化”，“1”，{＆＃xD;＆＃xA;包：[“corechart”，“bar”]＆＃xD;＆＃xA;}）;＆＃xD;＆＃xA ; google.setOnLoadCallback（function（）{＆＃xD;＆＃xA; drawChart（）＆＃xD;＆＃xA; drawChart3（）＆＃xD;＆＃xA; drawChart2（）＆＃xD;＆＃xA; } && xD;＆＃xA;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆＃xD;＆＃xA; function drawChart（）{＆＃xD;＆＃xA;＆＃xD ;＆＃XA; var data = google.visualization.arrayToDataTable（[＆＃xD;＆＃xA; ['Day'，'Submitted'，'Published'，'Rejected'，'Created']，＆＃xD;＆＃xA; [' 29-MAR-16'，100,410,230,40]，＆＃xD;＆＃xA; ['30 -MAR-16'，170,346,302,430]，＆＃xD;＆＃xA; ['31 -MAR-16'，60,100,130,40]，＆＃xD;＆＃xA; ['1-APRIL-16'，302,350,520,40]＆＃xD;＆＃xA ;]）;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆＃xD;＆＃xA; var options = {＆＃xD;＆＃xA;图表：{＆＃xD;＆＃xA;标题：'公司业绩'，＆＃xD;＆＃xA;副标题：'销售，费用和利润：2014-2017'，＆＃xD;＆＃xA; }，＆＃的xD;＆＃XA; bars：'horizontal'，// Material Bar Charts所需。＆＃xD;＆＃xA; hAxis：{＆＃xD;＆＃xA;格式：'十进制'＆＃xD;＆＃xA; }，＆＃的xD;＆＃XA;身高：500，＆＃xD;＆＃xA;颜色：['＃1b9e77'，'＃d95f02'，'＃7570b3'，'＃db7f0b']＆＃xD;＆＃xA; };＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; var chart = new google.charts.Bar（document.getElementById（'chart_div1'））;＆＃xD;＆＃xA;＆＃xD;＆＃xA; chart.draw（data，google.charts.Bar.convertOptions（options））;＆＃xD;＆＃xA;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA ;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆＃xD;＆＃xA;函数drawChart3（）{＆＃xD;＆＃xA; var data3 = google.visualization.arrayToDataTable（[＆＃xD;＆＃xA; ['Day'，'Sales']，＆＃xD;＆＃xA; ['4-APRIL-16'，1000]，＆＃ xD;＆＃xA; ['5-APRIL-16'，1170]，＆＃xD;＆＃xA; ['6-APRIL-16'，660]，＆＃xD;＆＃xA; ['7- APRIL-16'，1030]＆＃xD;＆＃xA;]）;＆＃xD;＆＃xA;＆＃xD;＆＃xA; var options3 = {＆＃xD;＆＃xA;标题：'公司业绩'，＆＃xD;＆＃xA; curveType：'function'，＆＃xD;＆＃xA;传奇：{＆＃xD;＆＃xA;位置：'底部'＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; };＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; var chart3 = new google.visualization.LineChart（document.getElementById（'curve_chart'））;＆＃xD;＆＃xA;＆＃xD;＆＃xA; chart3.draw（data3，options3）;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆＃xD;＆＃xA; function drawChart2（）{＆＃xD;＆＃xA; var data2 = google.visualization.arrayToDataTable（[＆＃xD;＆＃xA; ['Day'，'CreaditCard'，'Invoice']，＆＃xD;＆＃xA; ['4-APRIL-16'，1000 ，400，＆＃xD;＆＃xA; ['5-APRIL-16'，1170,460]，＆＃xD;＆＃xA; ['6-APRIL-16'，660,1120]，＆＃ xD;＆＃xA; ['7-APRIL-16'，1030,540]＆＃xD;＆＃xA;]）;＆＃xD;＆＃xA;＆＃xD;＆＃xA; var options2 = {＆＃xD;＆＃xA;标题：'CreaditCard /发票明细'，＆＃xD;＆＃xA; curveType：'function'，＆＃xD;＆＃xA;传奇：{＆＃xD;＆＃xA;位置：'底部'＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; };＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; var chart2 = new google.visualization.LineChart（document.getElementById（'cc / invoice'））;＆＃xD;＆＃xA;＆＃xD;＆＃xA; chart2.draw（data2，options2）;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆＃xD;＆＃xA; ＆LT; /脚本＆GT;＆＃的xD;＆＃XA;＆＃的xD;＆＃XA;＆LT; /头＆GT;＆＃的xD;＆＃XA;＆LT;主体＆GT;＆＃的xD;＆＃XA;＆＃的xD; ＆＃xA;＆lt; div id =“chart_div1”style =“width：900px; height：500px;”＆gt;＆lt; / div＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; div id =“curve_chart”style =“width：900px; height：500px”＆gt;＆lt; / div＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; div id =“cc / invoice”style =“width：900px; height：500px”＆gt;＆lt; / div＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA; #foreach（$ item in $ {chartBarForSubmittedManid}）＆＃xD;＆＃ XA;计数= $ {item.count}＆＃的xD;！＆＃XA;＃端＆＃的xD;＆＃XA;＆LT; / BODY＆GT;＆＃的xD;＆＃XA;＆LT; / HTML＆GT;

＆＃的xD;＆＃XA;

＆＃的xD;＆＃XA; ＆＃XA;

Answer 1

循环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);
}

＆＃13;

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)

＆＃13;

<pre id="arraY">
</pre>

＆＃13;

https://jsfiddle.net/37urrtLt/

编辑：

谷歌图表上的

http://jsfiddle.net/srrrn9sa/282/示例，但我根本不了解谷歌图表，因此您可以使用它来解决您的问题

<强> EDIT2

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

<强> EDIT3

Full example

Answer 2

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

Answer 3

只是为了映射，您可以使用此解决方案。

＆＃13;

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

＆＃13;

Answer 4

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

如何动态地在javascript中使用json数据？

4 个答案: