JSON parser with Array Comma Separated Javascript

Question

i have a JSON structure which looks like this.

"content" : {
    "state" : {
      "Idle" : [
        [
          78.366666667,
          1436955825
        ],
        [
          71.281111111,
          1436955840
        ],
        [
          70.41,
          1436955855
        ],
        [
          74.283333333,
          1436955870
        ],
        [
          76.411111111,
          1436955885
        ]
       ] 
        } }

What i have to do is to parse this value. i have to separate comma separated value into x and y. i have to parse these values and separate them. i am having problem issue parsing them

it should look like this

 "Idle" : [
            {
              "x" : 78.366666667,
              "y" :1436955825
            },
            {
              "x" :71.281111111,
              "y" :1436955840
            },
            {
              "x" :70.41,
              "y" :1436955855
            },
            {
              "x" :74.283333333,
              "y" :1436955870
            },
            {
              "x" :76.411111111,
              "y" :1436955885
            }
           ]

Json is well understood by Javascript. You can get a plain javascript object and then transform it as you want. What is the issues you're facing ? What have you already tried ? — Emrys Myrooin
– Emrys Myrooin, Commented Jul 16, 2015 at 7:50
don't you think second one is invalid. it should be in {}. — Jai
– Jai, Commented Jul 16, 2015 at 7:52

KooiInc · Accepted Answer · 2015-07-16 08:11:31Z

3

Map the ...Idle elements to objects (see MDN for Array.map):

test = {
  content: { 
   state: {
     Idle: [
        [
          78.366666667,
          1436955825
        ],
        [
          71.281111111,
          1436955840
        ],
        [
          70.41,
          1436955855
        ],
        [
          74.283333333,
          1436955870
        ],
        [
          76.411111111,
          1436955885
        ]
       ]
   } 
  } 
};


test.content.state.Idle = test.content.state.Idle.map(
                            function (v) {
                              return { x: v[0], y: v[1] };
                            }
                           );

document.querySelector("#result").textContent = JSON.stringify(test, null, " ");

<pre id="result"></pre>

edited Jul 16, 2015 at 8:11

answered Jul 16, 2015 at 8:05

KooiInc

124k32 gold badges145 silver badges181 bronze badges

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

1 Comment

Cerbrus Over a year ago

Indentation preferences aside, this is the best way to do it. +1 :P

Andrei Zhamoida · Accepted Answer · 2015-07-16 07:59:48Z

var container = {
    "content": {
        "state": {
            "Idle": [
                [
                    78.366666667,
                    1436955825
                ],
                [
                    71.281111111,
                    1436955840
                ],
                [
                    70.41,
                    1436955855
                ],
                [
                    74.283333333,
                    1436955870
                ],
                [
                    76.411111111,
                    1436955885
                ]
            ]
        }
    }
};

var _oldIdle = container.content.state.Idle,
    _newIdle = [];

for (var i = 0; i < _oldIdle.length; i++) {
    _newIdle.push({
        x: _oldIdle[i][0],
        y: _oldIdle[i][1]
    });
}

container.content.state.Idle = _newIdle;

Jai · Accepted Answer · 2015-07-16 08:08:32Z

0

Try this way:

var json = {
  "content": {
    "state": {
      "Idle": [
        [
          78.366666667,
          1436955825
        ],
        [
          71.281111111,
          1436955840
        ],
        [
          70.41,
          1436955855
        ],
        [
          74.283333333,
          1436955870
        ],
        [
          76.411111111,
          1436955885
        ]
      ]
    }
  }
};

var newObj = {},
  arr = [];

$.each(json.content.state.Idle, function(i, item) {
  arr.push({x: item[0], y: item[1]});
});
newObj.idle = arr;
console.log(newObj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Jul 16, 2015 at 8:08

answered Jul 16, 2015 at 8:04

Jai

74.8k12 gold badges77 silver badges104 bronze badges

2 Comments

Cerbrus Over a year ago

arr.push({ x: item[0], y: item[1] });. Don't overcomplicate it.

Jai Over a year ago

Thanks @Cerbrus didn't thought like that. Thanks again.

Grundy · Accepted Answer · 2015-07-16 08:44:48Z

0

If you have JSON string you can use JSON.parse with reviver function

var json = '{"content":{"state":{"Idle":[[78.366666667,1436955825],[71.281111111,1436955840],[70.41,1436955855],[74.283333333,1436955870],[76.411111111,1436955885]]}}}';
var result = JSON.parse(json, function(k, v) {
  if ((v instanceof Array) && (isFinite(Number(k)))) {
    //if array with coordinates - return object instead
    return {
      x: v[0],
      y: v[1]
    };
  }
  return v;
})
console.log(result);
document.getElementById('r').innerHTML = JSON.stringify(result,null,2)

<pre id='r'></pre>

answered Jul 16, 2015 at 8:44

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

Comments

michelem · Accepted Answer · 2015-07-16 08:02:15Z

-1

With UnderscoreJS is simple:

JSFiddle

var values = {
    "content": {
        "state": {
            "Idle": [
                [
                78.366666667,
                1436955825],
                [
                71.281111111,
                1436955840],
                [
                70.41,
                1436955855],
                [
                74.283333333,
                1436955870],
                [
                76.411111111,
                1436955885]
            ]
        }
    }
};

var newValues = _.map(values.content.state.Idle, function (value, key) {
    return {x: value[0], y: value[1]};
});

console.log(newValues);

answered Jul 16, 2015 at 8:02

michelem

14.6k5 gold badges55 silver badges67 bronze badges

6 Comments

Cerbrus Over a year ago

You don't need a library to map an array.

michelem Over a year ago

I didn't say you need it, I just gave my answer that is correct. Isn't the best one? Well, I can agree, but it's correct. Downvote isn't correct imho.

Jai Over a year ago

@Michelem well that can be done using plain js so why bother to use a lib.

Cerbrus Over a year ago

Downvote tooltip: "This answer is not useful." I think this answer isn't useful because it requires a user to load a library for something that can just as easily be done in native JS. Besides, users can vote how they wish. I didn't have to explain my downvote...

Siddharth Over a year ago

i am using these values for x and y for Rickshaw graph. but the problem is that the rickshaw is not working as the x has double quotes in it.

|

Collectives™ on Stack Overflow

JSON parser with Array Comma Separated Javascript

5 Answers 5

1 Comment

Comments

2 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related