使用 $.each 和 if 与 $.getJSON

Posted 2023-03-16

【中文标题】使用 $.each 和 if 与 $.getJSON

【英文标题】：Use $.each and if with $.getJSON

【发布时间】：2013-06-18 00:59:21

【问题描述】：

我和 $.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 语句分开？

【参考方案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;
);

【讨论】：

成功了！唯一的问题是第一个 \ 之后的斜线需要删除。非常感谢！

实际上，有那么一秒钟我忘记了我的 if 问题。我尝试了很多选项，但我似乎无法让 if 语句与我的 JSON 一起使用。感觉像一个 n00b xD。

我在任何地方都看不到任何 if 语句？

是的，那是因为我不知道如何使用它。例如（只是一个例子，因为我需要它用于另一个 JSON 文件），如果我只想在“expo”==“pit”的情况下打印数据怎么办。我尝试以这种方式实现它，但没有显示任何数据。

if( val.expo === "pit" ) 应该这样做

【参考方案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...

jQuery's .each() 在遍历 DOM 中的元素时非常有用。例如，如果你想遍历 dsc 类的元素，你可以这样做：

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

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

jQuery's API 通常有可靠的例子；就是这样一种情况。

【参考方案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>';
    );