$.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
– Tharsan, Commented Mar 26, 2013 at 1:55
@Tharsan, I was just trying to go display all the stuff in the songs object. — Anthony Honciano
– Anthony Honciano, Commented Mar 26, 2013 at 2:20
@tjb1982, please explain why this is strange. I'm still learning this, so your info is greatly apprecaited. — Anthony Honciano
– Anthony Honciano, Commented Mar 26, 2013 at 2:21

PSL · Accepted Answer · 2013-12-18 04:20:07Z

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, 2013 at 4:20

answered Mar 26, 2013 at 2:04

PSL

124k21 gold badges257 silver badges243 bronze badges

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

1 Comment

Anthony Honciano Over a year ago

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.

Aiias · Accepted Answer · 2013-03-26 01:59:20Z

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, 2013 at 1:59

Aiias

4,7481 gold badge20 silver badges34 bronze badges

1 Comment

Anthony Honciano Over a year ago

This also worked for me too!! You guys are super awesome for your help!

Matt Wielbut · Accepted Answer · 2013-03-26 01:58:25Z

0

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

answered Mar 26, 2013 at 1:58

Matt Wielbut

2,7421 gold badge28 silver badges31 bronze badges

Comments

user142368 · Accepted Answer · 2013-03-26 02:09:54Z

0

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.

answered Mar 26, 2013 at 2:09

user142368

1 Comment

tjb1982 Over a year ago

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 stackoverflow.com/questions/8348569/… for implementation details

tjb1982 · Accepted Answer · 2013-03-26 02:38:20Z

0

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

answered Mar 26, 2013 at 2:38

tjb1982

2,2592 gold badges26 silver badges39 bronze badges

Collectives™ on Stack Overflow

$.each() with nested array

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related