accessing JSON array item from another array

Question

I'm a JS n00b, so my apologies for asking something so simple. (It's so simple that the rest of SO is providing more complex answers than I need.) I have a JSON array like this:

var comics = {"spider":"Spiderman", "bat":"Batman", "super":"Superman", "aqua":"Aquaman"};

And I want to access items in that array from another array, like so:

var childhood_heroes = {"fire":"Firefighters", "jordan":"Michael Jordan", "superhero":[comics.super, comics.bat]};

I'm attaching it with jQuery to a div in my HTML with:

$('#which_heroes').click(function() {
    $('#jobs').html(childhood_heroes.fire);
    $('#sports').html(childhood_heroes.jordan);
    $('#supers').html(childhood_heroes.superhero);
});

The first two work when the third is absent. The presence of the third breaks everything. What am I doing wrong?

As a note, your JSON would be less coupled if superheroes were ["super", "bat"], instead of explicit references. — Jason McCreary
– Jason McCreary, Commented Jun 23, 2011 at 16:16
replace [comics.super, comics.bat] with comics.super +' '+ comics.bat — Val
– Val, Commented Jun 23, 2011 at 16:17
Jason — I'm not sure what "less coupled" means, but I'll definitely look it up, thanks! Val — I have this problem even if I only have one object in the array, so that probably isn't going to help. But thanks! Felix — Um, thanks, but that still doesn't solve my problem — Heather
– Heather, Commented Jun 23, 2011 at 16:30
@Heather: That is why I commented. If I wanted to solve your problem I would have provided an answer ;) Clarifying terminology is important too! — Felix Kling
– Felix Kling, Commented Jun 23, 2011 at 16:38

Robert · Accepted Answer · 2011-06-23 16:14:06Z

3

This

$('body').html(["one","two"]);

Produces

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

So, your issue is that you're passing an array of strings to the jQuery .html() function, which apparently doesn't handle it too well. Turn it into a string before you pass it, something like

$('#supers').html(childhood_heroes.superhero.join(', '));

should work.

The two valid arguments for .html() from http://api.jquery.com/html/ are

html( htmlString  )
    .html( htmlString )
    .html( function(index, oldhtml) )

answered Jun 23, 2011 at 16:14

Robert

21.4k9 gold badges57 silver badges67 bronze badges

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

1 Comment

Heather Over a year ago

This worked perfectly, and I really appreciate the explanation for why what I was doing didn't work. Thank you!

Björn · Accepted Answer · 2011-06-23 16:14:54Z

0

You're accessing an Array where you probably want a String, you can use join() to put all the entries in the superhero array into a string:

$('#supers').html(childhood_heroes.superhero.join(", "));

answered Jun 23, 2011 at 16:14

Björn

2,64817 silver badges18 bronze badges

Comments

Mike Samuel · Accepted Answer · 2011-06-23 16:15:09Z

0

Make sure comics is initialized before childhood_heroes.

And not to nitpick, but neither of the things you defined are JavaScript or JSON arrays. They're only "arrays" in the very loose sense of "associative arrays".

answered Jun 23, 2011 at 16:15

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

8 Comments

Robert Over a year ago

I'm confused by your edit, are you saying JavaScript variables, Objects, Arrays, and jQuery code is not JavaScript?

Felix Kling Over a year ago

You can also be precise and just say they are objects.

Mike Samuel Over a year ago

@Robert, I am saying that {"spider":"Spiderman",...} is not a JSON array as asserted in the OP.

Robert Over a year ago

Apologies, I misunderstood the intent as being directed at the tags, saying that only Array was a warranted tag. Thanks for clearing it up.

Heather Over a year ago

My bad. Like I said, I'm just learning this. Associative arrays are all I've worked with. How does a "proper" array differ?

|

Alex K. · Accepted Answer · 2011-06-23 16:23:51Z

0

The pair: "super":"Superman" will cause probs as super is reserved, so comics.super will raise an error in IE at least.

Rename it, or use comics["super"] notation.

answered Jun 23, 2011 at 16:23

Alex K.

177k32 gold badges276 silver badges299 bronze badges

1 Comment

Heather Over a year ago

Since my example is totally made up and has nothing to do with my actual code, I'm pretty sure that's not the problem. But thanks.

Collectives™ on Stack Overflow

accessing JSON array item from another array

4 Answers 4

1 Comment

Comments

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related