how to iterate thru json array and pull values with jQuery

Question

So I have the following JSON that is being displayed on an order confirmation page:

var orderDetails = {
    "orderID": "o32770183",
    "orderQty": 3,
    "orderTotal": 575.97,
    "orderShipping": 49.97,
    "orderDiscount": 0,
    "orderTax": 39.74,
    "orderCity": "Norwalk",
    "orderState": "Connecticut",
    "itemId": [
        "sku500134",
        "sku230312",
        "sku133846"
    ],
    "itemQty": [
        1,
        1,
        1
    ],
    "itemPrice": [
        159.99,
        225.99,
        189.99
    ],
    "itemName": [
        "The 'Inaugural' Raymond R Cabernet Sauvignon",
        "H de l'Hospitalet",
        "Chateau Florie Aude"
    ]
}

What would be the best approach to pulling the data out?

"So I have the following JSON..." That's not JSON. It's a JavaScript object initializer (aka "object literal"). JSON is a subset thereof, but when you have such a thing in your JavaScript code, it's not JSON. — T.J. Crowder
– T.J. Crowder, Commented Jun 6, 2012 at 20:46
@T.J.Crowder: Is there such a thing as a standard "wrapper"? JSON could really use one, if only for the purpose of changing the name. — user1106925
– user1106925, Commented Jun 6, 2012 at 20:50
@amnotiam: Huh? Not following you. Why would you want a wrapper around an object initializer? — T.J. Crowder
– T.J. Crowder, Commented Jun 6, 2012 at 20:53
@T.J.Crowder: No, not around an object, around the JSON standard so we can call it something else that doesn't start with "JS". I know, it was a stretch. ;) — user1106925
– user1106925, Commented Jun 6, 2012 at 20:57

Vivek Chandra · Accepted Answer · 2012-06-06 20:47:47Z

3

Or also, like this - a more dynamic approach - (if you dont know the objects elements)

for(i in orderDetails)
  alert(orderDetails[i])

answered Jun 6, 2012 at 20:47

Vivek Chandra

4,3569 gold badges36 silver badges39 bronze badges

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

Comments

Adam Rackis · Accepted Answer · 2012-06-06 20:54:29Z

2

That's actually not JSON, that's a plain old JavaScript object. You pull the data our just like with any other object

var orderId = orderDetails.orderID;

or

var orderId = orderDetails["orderID"];

or for arrays:

var itemQtyArr = orderDetails.itemQty;
for(var i = 0, max = itemQtyArr.length; i < max; i++){
   console.log("itemQty", i, itemQtyArr[i]);
}

or the dynamic approach Vivek posted (+1 to him)

edited Jun 6, 2012 at 20:54

answered Jun 6, 2012 at 20:45

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

8 Comments

T.J. Crowder Over a year ago

Or as this is tagged jquery, there's always $.each(orderDetails.itemQty, function(index, entry) { ... });

aziz punjani Over a year ago

Tj which is slower, i'd rather use for in

T.J. Crowder Over a year ago

@Interstellar_Coder: Not in the real world, unless you're dealing with millions of entries: blog.niftysnippets.org/2012/02/foreach-and-runtime-cost.html

Adam Rackis Over a year ago

@T.J.Crowder - I accept either are equally fast (never doubted it) - but is there an advantage to using $.each over a simple for loop? Is it just personal preference?

T.J. Crowder Over a year ago

@AdamRackis: I'd call it personal preference. With the function, you gain variable scoping and such. But totally style, I'd say. I used to do for loops. Once I tested the runtime cost, I mostly switched over to forEach and $.each for the scoping.

|

Abid · Accepted Answer · 2012-06-06 20:49:26Z

1

You can iterate the keys of a Javascript Object using for in

Lets say

a = {"a":"hello","b":"world"};

for(var c in a){
  console.log(c); //will out put a,b in iterations
  console.log(a[c]) //will access values of keys a and b from the object a output hello, world
}

answered Jun 6, 2012 at 20:49

Abid

7,25710 gold badges46 silver badges51 bronze badges

3 Comments

T.J. Crowder Over a year ago

There is no "JSON object" in your code. See comment on the question for details.

jrutter Over a year ago

@T.J.Crowder - what would be an example of a JSON object?

T.J. Crowder Over a year ago

@jrutter: See the comment on the question for the distinction between a JavaScript object initializer (which is what Abid is using) and JSON.

skashi · Accepted Answer · 2012-06-06 20:56:11Z

0

Here is a helpful JSON Editor tool that gives you a visual representation of your JSON object. It lists your named items and gives you the path to access your JSON values: JSON Editor

answered Jun 6, 2012 at 20:56

skashi

3352 silver badges9 bronze badges

Collectives™ on Stack Overflow

how to iterate thru json array and pull values with jQuery

4 Answers 4

Comments

8 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

8 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related