Используйте $ .each и если с $ .getJSON

Question

Я и $ .each не очень хорошие друзья, я не могу понять, как я должен использовать этот оператор для печати всех моих данных в моем файле JSON. Другая проблема - это оператор if, я пробовал его разными способами, но что бы я ни делал, данные не печатаются.

Мой JSON файл

[ 
{ 
"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" 
} 
] 

Мой $ .getJSON сценарий

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

Так как же я могу интегрировать заявление $ .each и отдельно от этого, если заявление?

Answer 1

Попробуйте

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

Что-то вроде этого?

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

Примечание: Я не проверял это, так что может быть несколько синтаксических ошибок (в основном озабоченные котировок в конкатенации).

Замечу, что для этого вам не нужен $ .each jQuery; Вы можете использовать основной для цикла:

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

jQuery's .each() действительно полезно, когда итерация элементов в DOM, хотя. Например, если вы хотите, чтобы перебрать элементы с классом dsc, вы могли бы сделать:

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

Кроме того, вы можете также использовать селекторы JQuery в (The $('#kome')), если вы собираетесь использовать JQuery.

jQuery's API обычно имеет прочные примеры для материала; это один такой случай.

Answer 3

$ .each может итерации массивов [] или объектов {}, ваш json содержит оба, поэтому сначала вам нужно решить массив, который дает вам объект на каждой итерации. Затем вы можете получить доступ к его свойствам. jQuery each documentation

Вторая вещь: добавить к innerHTML использовать «+ =» не «=» или вы сбросите html на каждой итерации.

var el = document.getElementById("kome"); 
$.getJSON('ajax/test.json', function(data) { 
    $.each(data, function(n, linkData) { 
     el.innerHTML += '<a href="' + linkData.link + '">' + linkData.expo + '</a>'; 
    }); 
}