CODEWITHSUNDEEP
javascriptjqueryarraysjson
Shane LeBlanc
Shane LeBlanc

Reputation: 2633

Iteration Of JSON Array Of Objects Not Working

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);
    }

Upvotes: 1

Views: 2626

Answers (4)

Muhammad Waqas
Muhammad Waqas

Reputation: 1150

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);


})

Upvotes: 1

Abdullah Jibaly
Abdullah Jibaly

Reputation: 54790

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

Upvotes: 0

jamesmortensen
jamesmortensen

Reputation: 34038

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.

Upvotes: 0

Phil
Phil

Reputation: 164760

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/

Upvotes: 0

Related Questions