Comment analyser JSON avec javascript/jquery si le contenu correspond à la chaîne

Question

J'ai actuellement un fichier JSON de personnes prenant part à une série d'événements de charité dans le format suivant:

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

Je veux construire un HTML simple liste à l'aide de ces données, de sorte que sous chaque date, le nom et le pays sont affichés comme:

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

J'ai à nouveau JSON et jusqu'à présent, je l'ai compris comment obtenir le nom et le pays sur la page, mais Je n'arrive pas à comprendre comment utiliser une instruction if pour sortir seulement si date = 13/10/2017 par exemple.

Voici ce que j'ai jusqu'à présent:

$(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>'); 
    }); 
}); 
}); 

Il est évident que ce qui précède est actuellement juste sortie chaque nom dans la section # 13102017. Je sais que j'ai probablement besoin d'un IF quelque part mais je suis autrement perplexe. Tous les pointeurs seraient très appréciés!

Answer 1

Sur chaque boucle, vérifiez d'abord si la date div existe, et sinon, créer. Puis ajouter les informations à ce 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>'); 
    }); 
}); 

Pour les boucles de tableau, je préfère utiliser for (est plus rapide que 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>'); 
    } 
}); 

NOTE: J'ajoute le div de date au corps, change juste $('body') au récipient où vous voulez les mettre dans votre page.

Answer 2

mais je ne peux pas comprendre comment utiliser une instruction if pour la sortie que si date = 13/10/2017

consultez si 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); 
      } 
     }); 
    }); 
}); 

Answer 3

Je vous suggère pour créer l'ensemble du code HTML et ensuite le définir comme 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>