JSON + jQuery - not hard in html

Question

I have problem with JSON, I need to include JSON data into HTML, now, when I view source on page - #content is empty - but data is viewing, and I need to have this data parsed in HTML (hardly) to work with them

How do to solve that?

$(document).ready(function () {
    $.getJSON('data.json', function (data) {
        $('#content').empty();
        $.each(data, function (entryIndex, entry) {
            var html = '<div class="data" id="' + entry['number'] + '">';
            html += '<b>' + entry['number'] + '</b>';
            html += '<div class="product">' + entry['product'] + '</div>';
            html += '<div class="price">' + entry['price'] + ' eur</div>';
            html += '<section class="image"><img alt="' + entry['product'] + '" src="' + entry['image'] + '"/></section>';
            if (entry['ingredients']) {
                html += '<section class="ingredients">';
                html += '<ul>';
                $.each(entry['ingredients'], function (colorIndex, ingredients) {
                    html += '<li>' + ingredients + '</li>';
                });
                html += '</ul>';
                html += '</section>';
            }
            $('#content').append(html);
        });
    });
    return false;
});

JSON is a string. You need to parse it, before it becomes an array where you can use `each` on: http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript — Tallmaris, Oct 04 '13 at 11:14
@Tallmaris `getJson` parses the response so you don't have to — John Dvorak, Oct 04 '13 at 11:14
NO. `$.getJSON()` automatically parses json and returns an object. so, variable `data` is an object — Rajesh, Oct 04 '13 at 11:15
ooops, sorry, I stand corrected. Anyway, @Adrian, have you tried debugging to see if the data is not empty? — Tallmaris, Oct 04 '13 at 11:18

score 0 · Answer 1 · answered Oct 04 '13 at 11:17

Declare the html variable outside $.each() and put below line outside $.each():

$('#content').append(html);

And also, close your <div> after IF condition

 var html = '';
 $.each(data, function(entryIndex, entry){
        html += '<div class="data" id="' + entry['number'] + '">';                     
        html += '<b>' + entry['number'] + '</b>';
        html += '<div class="product">' + entry['product'] + '</div>';  
        html += '<div class="price">' + entry['price'] + ' eur</div>';              
        html += '<section class="image"><img alt="' + entry['product'] + '" src="' + entry['image'] + '"/></section>';
        if(entry['ingredients']){
            html += '<section class="ingredients">';                                            
            html += '<ul>';
            $.each(entry['ingredients'],function(colorIndex, ingredients){
                html += '<li>' + ingredients + '</li>';                        
            }); 
            html += '</ul>';                        
            html += '</section>';
        }
        html += '</div>';
    });  
   $('#content').append(html);

hello,tnx, but i don't see data.json file in this script, why? — Adrian Golian, Oct 04 '13 at 11:28

JSON + jQuery - not hard in html

1 Answers1