javascript - 如果内容与字符串匹配，如何使用 javascript/jquery 解析 json

Question

我目前有一个 json 文件，其中包含参加一系列慈善事件的人员，格式如下:

[
 {
   "FirstName": "Anushka",
   "Country": "UK",
   "Day": "13/10/2017"
 },
 {
   "FirstName": "Alessandra",
   "Country": "IT",
   "Day": "16/10/2017"
 },
{
   "FirstName": "Clare",
   "Country": "US",
   "Day": "13/10/2017"
 }
]

我想使用这些数据构建一个简单的 HTML 列表，以便在每个日期下显示名称和国家/地区，如下所示:

<div id="13102017">
<h1>13/10/2017</h1>
<div class="col-sm-4"><p>Anushka, UK</p></div>
<div class="col-sm-4"><p>Clare, US</p></div>
</div>

<div id="16102017">
<h1>16/10/2017</h1>
<div class="col-sm-4"><p>Alessandra, IT</p></div>
</div>

我是 JSON 新手，到目前为止，我已经弄清楚如何将名称和国家/地区显示到页面上，但我无法弄清楚如何使用 if 语句仅输出 if date = 13/10/2017 .

这是我到目前为止所得到的:

$( document ).ready(function() {
$.getJSON("URL_HERE", function(data) {
    $.each(data, function(i, item) {
        $('#13102017').append('<div class="col-sm-4"><p>' + item.FirstName + ", " + item.Country + '</p></div>');
    });
});
});

显然，上面目前只是将每个名称输出到 #13102017 部分。我知道我可能需要一个 IF 在那里的某个地方，但否则我会被难住。任何指示将不胜感激!

Answer 1

在每个循环中，首先检查日期 div 是否存在，如果不存在，则创建它。然后将信息附加到该 div...

$.getJSON("URL_HERE",function(data) {

    $.each(data, function(i,item) {
        var dateId = item.Day.replace(/\//g,'');

        if (!$('div#'+dateId).length)
            $('body').append('<div id="'+dateId+'"><h1>'+item.Day+'</h1></div>');

        $('div#'+dateId).append('<div class="col-sm-4"><p>' + item.FirstName + ", " + item.Country + '</p></div>');
    });
});

对于数组循环，我个人更喜欢使用for(比jquery each更快)...

$.getJSON("URL_HERE",function(data) {

    for (var i=0, l=data.length; i<l; i++) {

        var item = data[i],
            dateId = item.Day.replace(/\//g,'');

        if (!$('div#'+dateId).length)
            $('body').append('<div id="'+dateId+'"><h1>'+item.Day+'</h1></div>');

        $('div#'+dateId).append('<div class="col-sm-4"><p>' + item.FirstName + ", " + item.Country + '</p></div>');
    }
});

注意:我将日期 div 添加到正文，只需将 $('body') 更改为您所在的容器想要将它们放入您的页面中。