我如何将数据传递到对象数组中

Posted 2023-03-08

【中文标题】我如何将数据传递到对象数组中

【英文标题】：how can i pass data into array of object

【发布时间】：2017-06-16 22:17:02

【问题描述】：

我这里有这样的数据，

var dataArray = '["name":"books","value":43,"name":"DVDs","value":99,"name":"Magazines","value":37,"name":"eBooks","value":88,"name":"Other awesome things","value":67]';

我想用这个数据动态地构造这个chart，这意味着我的json在实际项目中会很大，它来自database。

这里是我想要的 chart 的 jsfiddle（我的情况是动态的）：http://jsfiddle.net/artefactory/m4on9L4p/

//canvasJS example - doughnut chart showing collection breakdown.   

var dataArray = '["name":"books","value":43,"name":"DVDs","value":99,"name":"Magazines","value":37,"name":"eBooks","value":88,"name":"Other awesome things","value":67]';

window.onload = function () 
    var chart = new CanvasJS.Chart("chartContainer",
    
      title:
        text: "What's in our collection"
      ,
      data: [
      
       type: "doughnut",
        // how to substitute above array here
       dataPoints: [
         y: 53.37, indexLabel: "Books" ,
         y: 35.0, indexLabel: "DVDs" ,
         y: 7, indexLabel: "Magazines" ,
         y: 2, indexLabel: "eBooks" ,
         y: 5, indexLabel: "Other awesome things" 
       ]
     
     ]
   );

    chart.render();
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.4.1/canvas.min.js"></script>
 <div id="chartContainer" style="height: 300px; width: 100%;">  </div>

我想建这个

dataPoints: [
             y: 53.37, indexLabel: "Books" ,
             y: 35.0, indexLabel: "DVDs" ,
             y: 7, indexLabel: "Magazines" ,
             y: 2, indexLabel: "eBooks" ,
             y: 5, indexLabel: "Other awesome things" 
           ]

动态地使用我的 json。我该怎么做？

问题：我想使用json 来构建图形，而不是使用hardcoded 值？

【参考方案1】：

使用JSON.parse()和Array.prototype.map()函数的解决方案：

...
dataPoints:  JSON.parse(dataArray).map(function (o) 
    return y: o.value, indexLabel: o.name;
)
...

【参考方案2】：

值 53.37、35.0 是如何得出的？它们的推导有数学公式吗？

如果您只是将“名称”映射到 indexLabel 并将“值”映射到 x，那么这段代码应该可以工作。

var desiredObj = x.map(function(currentElement) return x: currentElement.value, indexLabel: currentElement.name);

【讨论】：

哈哈@Dinesh Verma，你在问什么，我想让dataPoints:[] 被我的json 取代就是这样

【参考方案3】：

您可以像这样使用 jQuery map 函数：

var myNewDataArray = $.map(dataArray,function(a,b)
    return 
        y : a.value,
        indexLabel : a.name
    
);