如何分析與使用Javascript/jQuery的JSON，如果內容相匹配的字符串

我現在有一個人參加的格式如下一系列的慈善活動的JSON文件：如何分析與使用Javascript/jQuery的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語句僅輸出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在那裏，但我卻難倒了。任何指針將非常感激！

來源

2017-10-20 Georgia O' Brien

check if item.day === '13/10/2017' –

在每個循環中，首先檢查日期格存在，如果沒有，創建它。然後追加信息到該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')更改爲您希望將其放入頁面的容器。

來源

2017-10-20 08:55:16

，但我無法弄清楚如何在日期使用if語句只輸出= 13/10/2017

簡單的檢查，如果item.Day == "13102017"

$(document).ready(function() { 
    $.getJSON("URL_HERE", function(data) { 
     $.each(data, function(i, item) { 
      if (item.Day == "13102017") 
      { 
       var id = item.Day.replace(/\D/g, ""); 
       var html = '<div id="' id '">'; 
       html += '<h1>' + item.Day + '</h1>'; 
       html += '<div class="col-sm-4"><p>' + item.FirstName + '</p></div>'; 
       html += '<div class="col-sm-4"><p>' + item.Country + '</p></div>'; 
       html += '</div>'; 
       $(body).append(html); 
      } 
     }); 
    }); 
});

來源

2017-10-20 08:50:13 gurvinder372

我建議你創建整個html，然後將其設置爲html。

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

 

 
$(function() { 
 

 
    // You can have this inside $.getJSON 
 
    var _html = ""; 
 
    data.forEach(function(item) { 
 
    _html += '<div id="' + item.Day.replace(/\//g, "") + '">' + 
 
     '<h1>' + item.Day + '</h1>' + 
 
     '<div class="col-sm-4"><p>' + item.FirstName + ", " + item.Country + '</p></div>' + 
 
     '</div>'; 
 
    }); 
 

 
    $("#container").html(_html); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
</div>

來源

2017-10-20 08:51:40 void

如何分析與使用Javascript/jQuery的JSON，如果內容相匹配的字符串

回答

相關問題