up vote 1 down vote favorite

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?

share|improve this question
As a note, your JSON would be less coupled if superheroes were ["super", "bat"], instead of explicit references. – Jason McCreary Jun 23 '11 at 16:16
replace [comics.super, comics.bat] with comics.super +' '+ comics.bat – Val Jun 23 '11 at 16:17
1  
That is not a "JSON array". It is a JavaScript object. – Felix Kling Jun 23 '11 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 Jun 23 '11 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 Jun 23 '11 at 16:38
show 1 more comment

4 Answers

up vote 3 down vote accepted

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) )
share|improve this answer
This worked perfectly, and I really appreciate the explanation for why what I was doing didn't work. Thank you! – Heather Jun 23 '11 at 16:35
up vote 0 down vote

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(", "));
share|improve this answer
Thanks! This did it. – Heather Jun 23 '11 at 16:43
up vote 0 down vote

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

share|improve this answer
I'm confused by your edit, are you saying JavaScript variables, Objects, Arrays, and jQuery code is not JavaScript? – Robert Jun 23 '11 at 16:18
You can also be precise and just say they are objects. – Felix Kling Jun 23 '11 at 16:19
@Robert, I am saying that {"spider":"Spiderman",...} is not a JSON array as asserted in the OP. – Mike Samuel Jun 23 '11 at 16:20
Apologies, I misunderstood the intent as being directed at the tags, saying that only Array was a warranted tag. Thanks for clearing it up. – Robert Jun 23 '11 at 16:22
My bad. Like I said, I'm just learning this. Associative arrays are all I've worked with. How does a "proper" array differ? – Heather Jun 23 '11 at 16:28
show 4 more comments
up vote 0 down vote

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.

share|improve this answer
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. – Heather Jun 23 '11 at 16:26

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.