how can i pass data into array of object

Question

here i have data like this,

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

i want to construct this chart using this data dynamically, means my json will be large in actual project which will come from database.

here is jsfiddle for my desired chart (dynamically for my case):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>

i want to build this

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" }
           ]

dynamically with my json. how can i do it?

Question: instead of using hardcoded value i want to use json to build graph?

RomanPerekhrest · Accepted Answer · 2017-01-31 13:04:51Z

4

The solution using JSON.parse() and Array.prototype.map() functions:

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

answered Jan 31, 2017 at 13:04

RomanPerekhrest

93.1k4 gold badges75 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dinesh Verma · Accepted Answer · 2017-01-31 13:06:03Z

0

How are the values 53.37, 35.0 being derived? Is there a mathematical formula for their derivation?

If you just mapping "names" to indexLabel and "value" to x, then this piece of code should work.

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

edited Jan 31, 2017 at 13:06

answered Jan 31, 2017 at 13:02

Dinesh Verma

6668 silver badges9 bronze badges

1 Comment

user5405873 Over a year ago

ha ha @Dinesh Verma, what you are asking man, what i want dataPoints:[] to be replaced by my json thats it

Martin Brisiak · Accepted Answer · 2020-10-22 05:52:57Z

0

You can use the jQuery map function like this :

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

edited Oct 22, 2020 at 5:52

Martin Brisiak

4,11112 gold badges40 silver badges51 bronze badges

answered Jan 31, 2017 at 13:07

Alex C

1537 bronze badges

Collectives™ on Stack Overflow

how can i pass data into array of object

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related