JSON -- this one has me stumped

JavaScript
1

with help from fellow developers right here on Sitepoint I have learned so much JSON in the last two weeks or so…

now have one that’s stumping me…

JSON:


{
	"header": "List of Books",
	"the Books" : 
		[
			{ "title":  "Midnight's Children",
			  "author": "Salman Rushdie" 
			},
			{  "title":  "Dubliners",
			   "author": "James Joyce" 
			},
			{  "title":  "Emma Bovary",
			   "author": "Gustave Flaubert" 
			},
			{  "title":  "Letters to a Young Poet",
			   "author": "Rainer Maria Rilke" 
			}
        ]
}

objects inside an array… I can’t seem to get this one right…

my attempts so far…

what this page prints now is absurd!!! :frowning:

I loop fine thru top level, then thru array that contains the objects, but can’t figure out how to get to the objects… (I have to get to each obj, then loop thru each one, yes? don’t know why I can’t figure this one out… have been struggling w/this one since last night…

would appreciate suggestions…

thank you…

2

Hi again bud,

The problem lies here:

$.each(val, function(j,value) {	
    $.each(value, function(propNm,propVal) {
        $('#content').append('-- ' + propNm + ': ' + propVal + '<br>');
    });
});

In the first loop here, val is equal to a book object, so in the first iteration of the loop val contains:

{ 
    "title":  "Midnight's Children",
    "author": "Salman Rushdie" 
}

so the string “Midnight’s Children” is passed into the function as the argument value. Then you’re calling $.each again to interate over value. As value is a string, it’s passing it into the function one character at a time, which is why you get the funky output.

3

thank you so much, fretburner…

what am I missing?

still printing the same… even w/your new code… thank you very much, btw, I somehow knew I had to nest a loop in there, but just didn’t “see it”…:wink:

(I added one more key @ end of JSON, to make sure it prints correctly after all that other code…:wink:

PS: so the code you posted is the correct code or were you just explaining the prob w/my code?

I still can’t figure it out… I have done nested before, don’t why this one is stumping me…

thanks again…

4

Look at where the problem is occurring.


$.each(val, function(j,value) { 
    $.each(value, function(propNm,propVal) {
        $('#content').append('' + propNm + ': ' + propVal + '<br>');
    });
});

The val variable is an object, for example:

{title: "Emma Bovary", author: "Gustave Flaubert"}

Inside of function(j,value) the j variable is the property name and value is the string. So j is "title" and value is "Emma Bovary".
Or with the next property, j is "author" and value is "Gustave Flaubert"

So when value is "Emma Bovary", you are then using $.each() on that string, which goes ahead and processes that string character by character. As if it were an array consisting of [‘E’,‘m’,‘m’,‘a’,’ ',‘B’,‘o’,‘v’,‘a’,‘r’,‘y’]

You don’t want to process the strings as if they were an array. You have too many $.each command there. That’s why you’re getting your problem.

5

hi Paul… thank you…

so what is the correct code for the loop?

so I did


$.each(val, function(j,value) {	
	$.each(value, function(propNm,propVal) {
		$.each(propVal, function(propName2,propVal2) {
			$('#content').append(propName2  + ': ' + propVal2 + ' -- <br>');
		//	$('#content').append('' + propNm + ': ' + propVal + '  --<br>');
		});
	});
});

(I included one more loop… but got exact same result…:frowning:

thank you Paul…

6

Remove two of the loops.

7

oh my gosh – that’s right!!

and there I was, thinking I needed more loops…;-o

I must say, this is the most challenging JSON structure I’ve done…

objects inside arrays… that’s harder than the rest…:slight_smile:

thank you so much, Paul… enjoy the rest of your day…

8

You should try to get into the habit of using the browser’s developer tools to debug your JS. Take the code we were talking about last night as an example:

$.each(val, function(j,value) {
    $.each(value, function(propNm,propVal) {
        $('#content').append('' + propNm + ': ' + propVal + '<br>');
    });
});

If you set a break point on the first $.each call and reload the page, the browser will pause the execution of the JS at that point and allow you to inspect the contents of the variables to see what’s going on.

9

You can even force a breakpoint to occur, which will only take effect when the console is visible, with the breakpoint statement. For example:


$.each(val, function(j,value) { 
    breakpoint;
    $.each(value, function(propNm,propVal) {
        $('#content').append('' + propNm + ': ' + propVal + '<br>');
    });
});

This does works well in Google Chrome, but your mileage may vary with other browsers.

10

thank you very much, Paul…

I’m actually glad you’re mentioning this… I kept looking at the console and it showed no errors…

actually in Chrome I got “breakpoint is not defined…” :wink:

but I’ll figure it out… I’ll just read up on it more… I do need to learn more to debug JS with the browser dev tools (it’s great for markup and CSS, but I don’t know too much how to debug JS with those tools (except in obvious situations when you get errors, of course…)

again, thank you very much for your help, Paul…