Modifying JSON Object with jQuery

Question

My API responds my call with the following JSON structure:

[
    {
        "order": {
            "total": "240.0",
            "completed_at": 1358432545000
        }
    },
    {
        "order": {
            "total": "720.0",
            "completed_at": 1359474090000
        }
    }
]

However, I want this JSON to be structured like this in order to use my data in Flot Graphs:

   {
        "label":"Order",
        "dataBar":[
            [
                1358432545000,
                240.0
            ],
            [
                1325635200000 ,
                720.0
            ]
        ]
    }

I've tried the following code, but it returns all data with comma separated, without '[' and ']'

var flotData = $.map(API_Response, function(i){ return [i.order.completed_at, parseInt(i.order.total)] });

How should I do that?

Are you modifying this json object usign JQuery? Create an object out of existing json, create a new empty object and add values to the new one. Then create JSON out of the new object. — Ravi Y
– Ravi Y, Commented Jan 30, 2013 at 10:12
I don't see why 3 users voted to close this as not a real question. It looks very real to me. — Denys Séguret
– Denys Séguret, Commented Jan 31, 2013 at 9:20

AstroCB · Accepted Answer · 2014-08-23 03:41:31Z

7

You can do this:

var data2 = {
    label: 'Order',
    dataBar: data.map(function(v){return [
         v.order.completed_at,
         parseFloat(v.order.total)
    ]})
};

Demonstration (open the console to see data2)

But please note there is nothing that can be called a "JSON structure" or a "JSON object".

What you have is a plain JavaScript object, even if it was sent to your browser encoded in JSON.

Now supposing you don't know the property of your object is called order, then you can do it with

var label;
for (var k in data[0]) {
   label = k[0].toUpperCase()+k.slice(1);
   break;
}
var data2 = {
    label: label,
    dataBar: data.map(function(v){return [
         v[k].completed_at,
         parseFloat(v[k].total)
    ]})
};

(It would be cleaner without support for IE 8, as I could have used Object.keys.)

edited Aug 23, 2014 at 3:41

AstroCB

12.4k20 gold badges59 silver badges75 bronze badges

answered Jan 30, 2013 at 10:11

Denys Séguret

384k90 gold badges813 silver badges779 bronze badges

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

5 Comments

Boaz Over a year ago

Aren't completed_at and total properties of a deeper object?

Denys Séguret Over a year ago

@Boaz You're right. I fixed (and tested) the answer.

CanCeylan Over a year ago

thank you very much for your answer. For general usage, is there any way to automate .order part, in case of json data changes ?

Denys Séguret Over a year ago

@CanCeylan See edit regarding automatic building of the label.

CanCeylan Over a year ago

No, what I mean is, if the json has the following value: "SOMETHING_DIFFERENT_THAN_ORDER": { "total": "240.0", "completed_at": 1358432545000 }. So we won't be able to reach the values by writing v.order

Collectives™ on Stack Overflow

Modifying JSON Object with jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related