Iteration Of JSON Array Of Objects Not Working

Question

I have an array of objects that should be looking like this...

[{"Name":"blah","Description":"blah"},{"Name":"blah2","Description":"blah2"}]

Using Javascript/jQuery, how can I get the key/value pairs? I've tried many different ways but to no avail. When I try to get the length, it always returns the character count and iterates through each character and not the actual count of objects? When I run this, it returns an alert for [object Object], [object Object] spelled out by each character....

function DisplayItems(data) {
        $.each(data, function () {
            $.each(this, function (key, value) {
                alert(value);
            });
        });
}

Now that I look at this, is it not the array of objects I'm expecting? How can I actually return the string so I can actually see what's really in it and maybe go from there?

**EDIT:

This is my function to get the orders (cut out the crap and showing you an alert)... I call jQuery.Ajax and pass the returned data to displayOrders(data). The orders have a composite property of Items containing a list of Item.

function displayOrders(data) {
        $('#gdvOrders tbody').empty();
        for (var key in data.d) {
            alert(data.d[key].Items);
}

This is what I passed to displayItems, what you see in the alert function. I display the Orders in one table (hiding some columns including the Items), and want to display the Items for each order in another table when they select a row in the orders table. In the function shown above I can write...

data.d[key].OrderId

and it will display as normal. How do I display the properties for each item?

The jQuery.Ajax function is set to content-type: 'application/json; charset=utf-8' and this is where I get the orders from...

[WebMethod]
    public static List<Order> GetOrdersByDept(Department department, Filter filter, DateTime? dateFrom = null, DateTime? dateTo = null)
    {
        return OrderLists.GetOrdersByDepartment((Department)department, (Filter)filter, dateFrom, dateTo);
    }

bummi · Accepted Answer · 2015-06-16 06:50:02Z

1

See this is working:

data=[{"Name":"blah","Description":"blah"},{"Name":"blah2","Description":"blah2"}]
data.forEach(function(i,j){

console.log("Name :"+i.Name+" Description :"+i.Description);


})

edited Jun 16, 2015 at 6:50

bummi

27.4k14 gold badges67 silver badges105 bronze badges

answered Jun 16, 2015 at 6:22

Muhammad Waqas

1,15012 silver badges20 bronze badges

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

Comments

Phil · Accepted Answer · 2012-05-09 03:45:41Z

0

Using JavaScript, simply use the for .. in loop

for(var i = 0; i < data.length; i++) {
    var obj = data[i];
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            alert(key + " = " + obj[key]);
        }
    }
}

Fiddle here - http://jsfiddle.net/XWsvz/

answered May 9, 2012 at 3:45

Phil

166k25 gold badges265 silver badges269 bronze badges

1 Comment

Shane LeBlanc Over a year ago

Hi, your solution works perfectly in Fiddle but not when I run it on my side. I copy it exactly. jsfiddle.net/XWsvz has the data that I am receiving into the function and I put in your loop but instead of showing each property value it just iterates through each character as if it was plain text and has no other meaning. I've been trying to figure this out for hours and it's frustrating... lol...

jamesmortensen · Accepted Answer · 2012-05-09 03:46:37Z

0

Now that I look at this, is it not the array of objects I'm expecting? How can I actually return the string so I can actually see what's really in it and maybe go from there?

If the object is being returned as a string, you can simply alert it. However, if your function is being passed an unknown object, you can always convert it back to a JSON string and alert it so that you can visualize the structure:

function displayItems(data) {
    alert(JSON.stringify(data));
    ...

}

As a sidenote, I changed the first letter in your function to a lowercase letter to match naming conventions for functions in JavaScript.

answered May 9, 2012 at 3:46

jamesmortensen

34.2k11 gold badges102 silver badges124 bronze badges

3 Comments

Shane LeBlanc Over a year ago

Thanks for noticing, normally I do use that camel casing but for some reason didn't on this one. Also, stringify just displayed "[object, Object]" so, basically just wrapped some quotes around it.

jamesmortensen Over a year ago

Ok, where is the alleged JSON coming from? A server? If so, try looking at the response in your Firebug or Chrome Debugger NET tab to see if you're really getting back JSON. Also, check that your server is returning the object using the mime-type "application-x/json" or "application/json".

Shane LeBlanc Over a year ago

Updated the question with more info for you to look at.

Abdullah Jibaly · Accepted Answer · 2012-05-09 04:08:04Z

0

Looks like you're close:

function DisplayItems(data) {
    console.log('data is: ', JSON.stringify(data));
    $.each(data, function (key, arrayElement, index) {
        console.log('arrayElement ' + index + ' is: ', JSON.stringify(arrayElement));
        $.each(arrayElement, function (key, value) {
            console.log('key: ' + key + ' val: ' + value);
        });
    });
}

http://jsfiddle.net/ux9D8/

With your data this gives me the following output:

data is:  [{"Name":"blah","Description":"blah"},{"Name":"blah2","Description":"blah2"}]
arrayElement undefined is:  {"Name":"blah","Description":"blah"}
key: Name val: blah
key: Description val: blah
arrayElement undefined is:  {"Name":"blah2","Description":"blah2"}
key: Name val: blah2
key: Description val: blah2

edited May 9, 2012 at 4:08

answered May 9, 2012 at 3:48

Abdullah Jibaly

55.2k45 gold badges129 silver badges201 bronze badges

2 Comments

Shane LeBlanc Over a year ago

Console displays data is: "[object Object],[object Object],[object Object],[object Object]" and then writes out array element undefined is: "[" key: 0 val: [ and so on.

Abdullah Jibaly Over a year ago

Works for me with your data, can you check my jsfiddle and let me know what's different on your end?

Collectives™ on Stack Overflow

Iteration Of JSON Array Of Objects Not Working

4 Answers 4

Comments

1 Comment

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related