SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    JSON -- this one has me stumped.....

    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:

    Code:
    {
    	"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!!! :-(

    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. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,407
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi again bud,

    The problem lies here:
    Code JavaScript:
    $.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:
    Code JavaScript:
    { 
        "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. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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"......;-)

    (I added one more key @ end of JSON, to make sure it prints correctly after all that other code...;-)


    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    what am I missing?
    Look at where the problem is occurring.

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

    The val variable is an object, for example:

    Code:
    {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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    hi Paul.... thank you..

    so what is the correct code for the loop?

    so I did
    Code:
    $.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...:-(

    thank you Paul......

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    (I included one more loop... but got exact same result...:-(
    Remove two of the loops.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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....:-)


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

  8. #8
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,407
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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:
    Code JavaScript:
    $.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. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by fretburner View Post
    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:
    Code JavaScript:
    $.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.
    You can even force a breakpoint to occur, which will only take effect when the console is visible, with the breakpoint statement. For example:

    Code JavaScript:
    $.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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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..." ;-)

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •