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语句并从中分离if语句？

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>

注意：我没有对此进行测试，因此可能存在一些语法错误（主要是关注字符串连接中的引号）。

我会注意到你不需要jQuery的$ .each;你可以使用基本的for循环：

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

但是，当迭代DOM中的元素时，

jQuery's .each()非常有用。例如，如果您想要使用类dsc迭代元素，则可以执行以下操作：

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

另外，如果您打算使用jQuery，也可以使用jQuery的选择器（$('#kome')）。

jQuery's API通常有很好的例子;这是一个这样的案例。

Answer 3

$。每个都可以迭代数组[]或对象{}，你的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>';
    });
}

使用$ .each和if .getJSON

3 个答案: