$.each() with nested array

Question

First of all, forgive me if I didn't identify the right type of array, however I can't seem to figure this out.

I'm trying to run this array in query:

var myArray = {"artists":[{
            "a1":"Adam Sandler",
            "a2":"Adam Lambert",
            "a3":"Avril Levine",
            "a4":"Backstreet Boys",
            "a5":"Blackstreet",
            "a6":"Black Eye Peas",
            "a7":"Cool and the Gang",
            "a8":"Chicago",
            "a9":"Charlie Manson"

        }],
        "songs":[{
            "s1":"Grow Old With You",
            "s2":"Whatdaya Want From Me",
            "s3":"Yea yea",
            "s4":"Quit Playing Games With My Heart",
            "s5":"No Digity",
            "s6":"Meet Me Half way",
            "s7":"Doo wa ditty",
            "s8":"Fight for your honor",
            "s9":"Charlies Song"
        }],
        "genre":[{
            "g1":"Pop",
            "g2":"Pop",
            "g3":"Alternative",
            "g4":"R & B",
            "g5":"R & B",
            "g6":"Hip-Hop",
            "g7":"Funk",
            "g8":"Soft Rock",
            "g9":"Rock"
        }]};

When I click a button (say for title) I don't know how to have it automatically go through the array. This is what I have for my button:

                $.each(myArray.songs, function(e,i){
                    console.log("e:"+e+" - i:"+i+" - "+myArray.songs[e].i);

                });

This does work, however when it reaches to the console.log, this is what I get:

e:0 - i:[object Object] - undefined

I don't know how to get "i" to work, it always gives me [Object Object]. I replace I with the actual id in the array, it works.

Thank you.

It's not entirely clear what you're trying to accomplish here. Can you be more specific about the expected output? — Tharsan, Mar 26 '13 at 01:55
@Tharsan, I was just trying to go display all the stuff in the songs object. — Anthony Honciano, Mar 26 '13 at 02:20
@tjb1982, please explain why this is strange. I'm still learning this, so your info is greatly apprecaited. — Anthony Honciano, Mar 26 '13 at 02:21

PSL · Accepted Answer · 2013-12-18T04:20:07.247

14

If you want to use $.each you can try this:-

$.each(myArray.songs, function (i, ob) {
    $.each(ob, function (ind, obj) {
        console.log("key:" + ind + " value:" + obj);
    });
});

edited Dec 18 '13 at 04:20

answered Mar 26 '13 at 02:04

PSL

123,204
21
253
243

This totally worked! Thank you all for your input, I'm jsut learning JSON, so I apologize if this confused everyone or if it's not used right. I wasn't being thrown an errors, so I assumed it was fine. – Anthony Honciano Mar 26 '13 at 02:16

score 1 · Answer 2 · answered Mar 26 '13 at 01:59

1

If you are trying to loop through all of the songs, myArray.songs is an array with one object in it.

Try this:

$.each(myArray.songs[0], function(e, i) {
  console.log('e:' + e + ' - i:' + i);
});

And check out this jsFiddle http://jsfiddle.net/TsJP5/1/.

answered Mar 26 '13 at 01:59

Aiias

4,683
1
18
34

This also worked for me too!! You guys are super awesome for your help! – Anthony Honciano Mar 26 '13 at 02:18

score 0 · Answer 3 · answered Mar 26 '13 at 01:58

Your structure is a bit strange - songs is an array with a single json element containing your key - value pairings. Nonetheless, to loop over these elements you should do:

    var songsElement = myArray.songs[0];
    for (var key in songsElement) {
        if (songsElement.hasOwnProperty(key)) {
            console.log(key + " -> " + songsElement[key]);
        }
     }

score 0 · Answer 4 · answered Mar 26 '13 at 02:09

Unless you need to iterate a collection of jQuery elements, I wouldn't use $.each() (this is personal preference). Rather, exploit the native forEach() method on Array:

function each(obj, onSuccess, recursive) {
    if (obj && (typeof obj === 'object' || typeof obj === 'array')) {
        Object.keys(obj).forEach(function(key) {
            var val = obj[key];
            if (onSuccess && val && key) {
                var quit = onSuccess(val, key);
                if (false === quit) {
                    return false;
                }
            }
            if (true === recursive) {
                each(val, onSuccess, true);
            }
        });
    }
}

This handles both Array and Object instances as well as recursion. You take a slight performance hit by always using Object.keys() to get the member names, but I think its ultimately negligible even on very large data sets.

Not all browsers support .forEach so you might have to modify the array prototype in order to use it like this: `if (!('forEach' in Array.prototype)) Array.prototype.forEach = function() { ... };` see http://stackoverflow.com/questions/8348569/array-prototype-foreach-alternative-implementation-parameters for implementation details — tjb1982, Mar 26 '13 at 02:45

score 0 · Answer 5 · answered Mar 26 '13 at 02:38

I'm not completely sure what your data means, but it looks like a bunch of song/artist/genre groupings that go together. E.g.,

[{"song":"Losing My Religion",
  "artist":"R.E.M.",
  "genre":"alternative"},
 {"song":"Bizarre Love Triangle",
  "artist":"New Order",
  "genre":"electronica"}]

I'm not sure why s1, a1 or g1 are useful, so I'm leaving them out. And then I honestly think using jquery for this isn't helpful. I would do this instead:

for (var i = 0; i < myArray.length; i++)
  console.log(myArray[i].song + " by " + myArray[i].artist + " is of the " + myArray[i].genre + " ilk.");

$.each() with nested array

5 Answers5

Linked