Use $.each and if with $.getJSON

Question

Me and $.each aren't good friends, I can't seem to figure out how I should use this statement to print all my data in my JSON file. Another problem is the if statement, I tried it in many ways, but whatever I do, no data is being printed.

My JSON file

[
{
"expo":"pit",
"datum":"05.06.2011 - 05.06.2016",
"img":"images/pit_home.jpg",
"link":"exp1_index.html"
},
{
"expo":"Space Odessy 2.0",
"datum":"17.02 - 19.05.2013",
"img":"images/so_home.jpg",
"link":"exp2_index.html"
}
]

My $.getJSON script

<script type="text/javascript">
    function read_json() {
        $.getJSON("home.json", function(data) {
            var el = document.getElementById("kome");
            el.innerHTML = "<td><a href=" + data.link + " data-ajax='false'><img src=" + data.img + "><div class='dsc'>" + data.expo + "<br><em>" + data.datum + "</em></div></a></td>";
        });
    }
</script>

So how would I integrate the $.each statement and seperate from that, the if statement?

Answer 1

Try this

$.getJSON("home.json", function (data) {
    var html = '',
        el = document.getElementById("kome");
    $.each(data, function (key, val) {

         html += "<td><a href=" + val.link + " data-ajax='false'><img src=" + val.img + "><div class='dsc'>" + val.expo + "<br><em>" + val.datum + "</em></div></a></td>";
    });
    el.innerHTML = html;
});

Answer 2

Something like this?

<script type="text/javascript">
    function read_json() {
        $.getJSON("home.json", function(data) {
            var html = '';
            $.each(data, function(i, record) {
                html += '' +
                '<td>' +
                    '<a href="' + record.link + '" data-ajax="false">' +
                        '<img src="' + record.img + '">' +
                        '<div class="dsc">' +
                            record.expo + '<br>' +
                            '<em>' + record.datum + '</em>' +
                        '</div>' +
                    '</a>' +
                '</td>';
            });
            $('#kome').html(html);
        });
    }
</script>

Note: I haven't tested this, so there may be a few syntax errors (mostly concerned about the quotes in the string concatenation).

I will note that you don't need jQuery's $.each for this; you can use a basic for-loop:

for (var i = 0; i < data.length; i++) {
    var record = data[i];
    ... stuff...
}

jQuery's .each() is really useful when iterating over elements in the DOM, though. For example, if you wanted to iterate over the elements with class dsc, you could do:

$('.dsc').each(function(i, dsc) {
    // Do stuff to the $(dsc) element.
});

Also, you might as well use jQuery's selectors (the $('#kome')) if you're going to use jQuery.

jQuery's API usually has solid examples for stuff; this is one such case.