trying to create a new json object foreach item in array

Question

I have large json files with this structure, only a lot more charts in each one:

{ 
    "Name": "test", 
    "Charts": [
    {
        "chartName": "Idle Times",
        "disk": 0,
        "OpCode": "Read",
        "xAxis": [0,100,200,300,400,500],
        "yAxis": [337487,8565,11419,9704,7598]
    },
    {
        "chartName": "Idle Times",
        "disk": 0,
        "OpCode": "Read",
        "xAxis": [0,100,200,300,400,500],
        "yAxis": [337487,8565,11419,9704,7598]
    }]
}

The problem is that all the chart data, the x-y data, is in arrays and the the javascript chart tool I'm using needs the json to look like this:

{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":0, "yAxis":1234},
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":100, "yAxis":1234},
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":200, "yAxis":1234},
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":300, "yAxis":1234},
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":400, "yAxis":1234},
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":500, "yAxis":1234},
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":600, "yAxis":1234}

My app is using AngularJS, JSLINQ, D3JS, and DimpleJS currently. If there is a way to accomplish this with these tools that would be ideal. I'm also open to another open source library, I'm just hoping that I don't have to read in the whole json file and right it back with a pile of complicated for loops basically building the new json by hand line by line.

I'm also open to switching to another chart tool if there is something that will read the json data the way I have it now, DimpleJS is just pretty easy to use and looks really sharp.

Thanks in advance for the help!

what is your yAxis value supposed to be when related to the xAxis? 1234 says nothing about it unfortunately ;) — Ingmars
– Ingmars, Commented Jun 20, 2014 at 16:09
yeah, i just tossed in some values to show where they should be. There is always one x value for every y value. The amount of x-y pairs changes per chart — Chris Ubick
– Chris Ubick, Commented Jun 20, 2014 at 16:15
Finding a charting library that matches your data format might be a tall order. I think more practical to either save the data in a format suitable for the charting library you chose, or "loop over the existing data with a pile of complicated loops". :) (Not really that complicated.) — bloodyKnuckles
– bloodyKnuckles, Commented Jun 20, 2014 at 16:19
I agree with @bloodyKnuckles. Actual json rebuild via crappy fast loops is the way. — Ingmars
– Ingmars, Commented Jun 20, 2014 at 16:22

Andrei Nemes · Accepted Answer · 2014-06-20 16:22:12Z

3

So, if I understood correctly, you want to expand each x and y coordinates into separate points? Try something like this:

var source = { 
    "Name": "test", 
    "Charts": [
    {
        "chartName": "Idle Times",
        "disk": 0,
        "OpCode": "Read",
        "xAxis": [0,100,200,300,400,500],
        "yAxis": [337487,8565,11419,9704,7598]
    },
    {
        "chartName": "Idle Times",
        "disk": 0,
        "OpCode": "Read",
        "xAxis": [0,100,200,300,400,500],
        "yAxis": [337487,8565,11419,9704,7598]
    }]
};

var data = source.Charts.reduce(function(prev, now) {
  var target = [];
  for(var i = 0, len = now.yAxis.length; i < len; i++) {
    target.push({
      "chartName": now.chartName,
      "disk": now.disk,
      "OpCode": now.OpCode,
      "xAxis": now.xAxis[i],
      "yAxis": now.yAxis[i]
    })
  }
  return prev.concat(target)
}, [])

This should work, as long as you have an equal number of points.

answered Jun 20, 2014 at 16:22

Andrei Nemes

3,1221 gold badge18 silver badges23 bronze badges

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

2 Comments

Chris Ubick Over a year ago

Thanks everybody for the help! Both of those answers should work, and BloodyKnuckles is right, it's not as complicated as I was thinking. I tagged Andrei Nemes' answer as accepted only because I can't tag both. Thanks again!

Andrei Nemes Over a year ago

It's often easier than you'd think. It's easy to abstract away things in our heads and wrap them in libraries but in reality there's a lot that can be accomplished with simple control structures. In any case, have a look at the Array prototype and all the fun stuff you can do with it. It's pretty powerful :)

matt · Accepted Answer · 2014-06-20 16:20:35Z

2

It seems that you'll need to massage the input to match the expected format for your charting library. Here is a snippet that shows how you can do this.

For a given input:

var obj = {
    "chartName": "Idle Times",
    "disk": 0,
    "OpCode": "Read",
    "xAxis": [0,100,200,300,400],
    "yAxis": [337487,8565,11419,9704,7598]
};

Loop through the xAxis values:

var results = [];
for (var i = 0; i < obj.xAxis.length; i++) {
  results.push({
    "chartName":obj.chartName, 
    "disk":obj.disk,
    "OpCode":obj.OpCode,
    "xAxis":obj.xAxis[i],
    "yAxis":obj.yAxis[i]
  });
}

answered Jun 20, 2014 at 16:20

matt

1135 bronze badges

1 Comment

matt Over a year ago

Note that you'll want to add some error handling in case the number of x and y values don't match and things like that. This should get you on the right track.

Collectives™ on Stack Overflow

trying to create a new json object foreach item in array

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related