jQuery loading .each for objects in JSON array

Question

I'm trying to write an .each statement for objects in a JSON array.

$.ajax({
    url: url,
    dataType: 'json',
    success: function(data){
        $.each(data, function (key, value){
            ...do stuff...
        }
});

Problem is, it's only returning one result because it's only doing an .each for data when I need it to do an .each for the objects inside data. I'm sure it's as simple as .each(data.something ...) but I can't figure out what it is.

EDIT Per comment request, data looks like:

[["data1","data2","data3"],
 ["data1","data2","data3"],
 ["data1","data2","data3"]
]

EDIT2

Here is a JSFiddle of my working code. if I change teh .each function to just do an alert it works, but when I try to build divs, it only spits out one entry.

what does the data object look like? Can you debug or do an alert(JSON.stringify(data)); ? — user1573618
– user1573618, Commented Dec 19, 2012 at 17:15
So you want it to loop through: data1a,data2a,data3a,data1b,data2b...? — Blazemonger
– Blazemonger, Commented Dec 19, 2012 at 17:22
I want to loop through [ [stuff], [stuff], [stuff] ] if that makes sense. — Plummer
– Plummer, Commented Dec 19, 2012 at 17:30
It does not. As far as I can tell, you're already doing that. — Blazemonger
– Blazemonger, Commented Dec 19, 2012 at 17:30

Jason Whitted · Accepted Answer · 2012-12-19 18:07:08Z

1

I originally suggested using $.map() to create an array.

But the actual problem was that the OP was overwriting the html in each iteration of the loop. Editing my response to show the actual answer.

Answer: OP needed to change .html() to .append() in his .each() loop.

edited Dec 19, 2012 at 18:07

answered Dec 19, 2012 at 17:18

Jason Whitted

4,0141 gold badge18 silver badges16 bronze badges

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

3 Comments

Jason Whitted Over a year ago

A user-defined function. The map function takes an array and a function as its parameters.

Plummer Over a year ago

So should I have a function fn() somewhere? I'm confused.

Plummer Over a year ago

Answer was in the comments, but you gave it. Maybe alter response?

Blazemonger · Accepted Answer · 2012-12-19 17:24:22Z

1

Sounds like you need a nested loop:

$.ajax({
    url: url,
    dataType: 'json',
    success: function(data){
        $.each(data, function (idx1, value1){
            $.each(value1, function (idx2, value2){
                //...do stuff...
            });
        });
    });

answered Dec 19, 2012 at 17:24

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

4 Comments

Plummer Over a year ago

Tried this, didn't work. It's not the data that's not displaying, it's the iteration of the .each.

Blazemonger Over a year ago

I'm sorry, that makes no sense to me. Please clarify what you want to loop through in what order.

Plummer Over a year ago

So, the JOSN array starts with [, then the first object is declared inside that array with another [ -- This is the one I want .each to iterate. After the second dimension, comes the actual data which is "data1","data2","data3", those are the values that need to be printed. so, for each 2nd level object, print its objects/values.

Blazemonger Over a year ago

That sounds like what I originally had. I'm sorry, I don't think I can be much more help.

Blazemonger · Accepted Answer · 2012-12-19 17:57:50Z

1

The problem with your fiddle isn't the .each loop -- it's that you're using .html() to add code, which will replace everything inside the specified element with your new code.

Use .append() instead of .html() and you should be fine.

answered Dec 19, 2012 at 17:57

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Comments

Sushanth -- · Accepted Answer · 2012-12-19 17:24:52Z

0

Use one more loop

$.each(data, function(key, value) {
    $.each(value, function(i, val) {
        console.log(val)
    })
})

Check Fiddle

answered Dec 19, 2012 at 17:24

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

Sushanth -- Over a year ago

What is the code that you are using to build the div's ... Can you update that code as well

felipeclopes · Accepted Answer · 2012-12-19 17:37:10Z

0

Probably it is not a JSON object, just do the following

$.each($.parseJSON(data), function (key, value){
  ... stuff...
}

depending on the object, you should do a Map:

// Therefore, convert it to a real array
var realArray = $.makeArray( data )

// Now it can be used reliably with $.map()
$.map( realArray, function(val, i) {
  // do something 
});

Edit - Test on fiddle

With your object we can check that it is a nested array, so you have to double loop on it:

var data = [["data1","data2","data3"],
 ["data1","data2","data3"],
 ["data1","data2","data3"]
];

$.each(data, function(key, item) {
    $.each(item, function(i, val) {
        alert(val);
    })
});

fiddle

Edit 2 - Code for you situation!

$.ajax({
    url: url,
    dataType: 'json',
    success: function(data){
        $.each(data, function(key, item) {
            $.each(item, function(i, val) {
                alert(val);
            })
        }
    }
});

Hope it helps!!

edited Dec 19, 2012 at 17:37

answered Dec 19, 2012 at 17:21

felipeclopes

4,0802 gold badges27 silver badges36 bronze badges

2 Comments

Plummer Over a year ago

Why is that not JSON? I was encoded as JSON from PHP, AJAX call is set to dataType: 'json', Wouldn't AJAX run the error: if it wasn't JSON?

Plummer Over a year ago

The problem is it iterates through each data1 or data2 item. I want it to parse the parent level of those items. [["data1","data2"], //<---for each of these ["data1","data2"]//<--and this one too ], so the `.each function would run two times.

Collectives™ on Stack Overflow

jQuery loading .each for objects in JSON array

5 Answers 5

3 Comments

4 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

4 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related