Display complex JSON with use of jquery .each

Question

I was having trouble trying to make this code work. I really don't see anything wrong with the javascript. When I debug, I don't find errors either.

<head>
<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function() {
$('#Presentation').click(function() {
var jsonloc = "ppt.json";
        $.when($.getJSON(jsonloc)).then(function(info){
        $('#header').empty();
            $.each(info.slides, function(entryIndex, entry){
            var html = '<div class="info">';                      
            html += '<h3>' + entry['title'] + '</h3>';
            html += '<div class="author">' + entry['author'] + '</div>';                    
                if(entry['slides']){
                    $.each(entry['slides'],function(slideIndex, slides){
                        html += '<h3>' + slides['Slide'] + '<h3>';                                          
                        html += '<div class="header">' + slides['header'] + '</div>';                          
                        }); 
                if(slides['Content']){
                html += '<div class="Content">';                                            
                html += '<ol>';
                    $.each(slides['content'],function(contentIndex, content){
                        html += '<li>' + content + '</li>';                        
                            }); 
                        html += '</ol>';                        
                        html += '</div>';                               
                    };                                  
                $('#header').append(html);
            };                         
        });
        return false;
    });
    });

});
</script>
</head>
<body>

<a href="#" id="Presentation">ppt presentation</a>
<div id="header">
</div>
</body>

here is the JSON:

{
    "title": "presentation",
    "date_created": "",
    "last_modified": "",
    "author": "By: Someone online",
    "slides": [
        {
            "Slide": "1",
            "header": "first header",
            "src": "ssss.jpg",
            "Content": "dddddddddddddddddddddddddddddddddddd",
            "Content": "dddddddddddddddddddddddddddddddddddd",
            "Content": "dddddddddddddddddddddddddddddddddddd"
        },
        {
            "Slide2": "2",
            "header2": "header 2",
            "src2": null,
            "Content": "dddddddddddddddddddddddddddddddddddd",
            "Content": "dddddddddddddddddddddddddddddddddddd",
            "Content": "dddddddddddddddddddddddddddddddddddd"

        },
        {
            "Slide3": "3",
            "header3": "header3",
            "src3": "sdfdsf.jpg",
            "Content": "dddddddddddddddddddddddddddddddddddd",
            "Content": "dddddddddddddddddddddddddddddddddddd",
            "Content": "dddddddddddddddddddddddddddddddddddd"
        }
    ]
}

I really want to make this work and don't want to use other methods such as jquery templates. Is there anything that jumps out?

I don't think that's possible to have a json file with the same keys multiple times, because you won't be able to retrieve the value for Content` — wakooka
– wakooka, Commented Jan 16, 2013 at 2:04
I was trying different codes and methods. I have the JSON fixed now. — swaggyP
– swaggyP, Commented Jan 16, 2013 at 2:24

wakooka · Accepted Answer · 2013-01-16 02:02:11Z

1

You're closing .each too soon :

$.each(entry['slides'],function(slideIndex, slides){
    html += '<h3>' + slides['Slide'] + '<h3>';                                          
    html += '<div class="header">' + slides['header'] + '</div>';                          
 }); 
 if(slides['Content']){ 
 // ...

That way you only access the last value of slides['Content'].

You need to put that if and what it contains into your loop like this :

 $.each(entry['slides'],function(slideIndex, slides){
    html += '<h3>' + slides['Slide'] + '<h3>';                                          
    html += '<div class="header">' + slides['header'] + '</div>';      
    if(slides['Content']){
    // ...

 });

answered Jan 16, 2013 at 2:02

wakooka

1,42811 silver badges15 bronze badges

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

3 Comments

swaggyP Over a year ago

Okay, so I corrected that, but still... there is no JSON displayed

wakooka Over a year ago

Also your json is messed up, why do you have "Slide", "Slide2", "Slide3" ?

swaggyP Over a year ago

I was trying other codes on the JSON so I kept changing it. Ive corrected it now, however, still no luck.

Collectives™ on Stack Overflow

Display complex JSON with use of jquery .each

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related