web-dev-qa-db-fra.com

jQuery 'each' loop avec tableau JSON

J'essaie d'utiliser la boucle each de jQuery pour parcourir ce code JSON et l'ajouter à une variable div nommée #contentHere. Le JSON est comme suit:

{ "justIn": [
  { "textId": "123", "text": "Hello", "textType": "Greeting" },
  { "textId": "514", "text":"What's up?", "textType": "Question" },
  { "textId": "122", "text":"Come over here", "textType": "Order" }
  ],
 "recent": [
  { "textId": "1255", "text": "Hello", "textType": "Greeting" },
  { "textId": "6564", "text":"What's up?", "textType": "Question" },
  { "textId": "0192", "text":"Come over here", "textType": "Order" }
  ],
 "old": [
  { "textId": "5213", "text": "Hello", "textType": "Greeting" },
  { "textId": "9758", "text":"What's up?", "textType": "Question" },
  { "textId": "7655", "text":"Come over here", "textType": "Order" }
 ]
}

Je reçois ce JSON en utilisant ce code:

$.get("data.php", function(data){

})

Des solutions?

javascriptjqueryjsoneach
26
Ben

Essayez (non testé):

$.getJSON("data.php", function(data){
    $.each(data.justIn, function() {
        $.each(this, function(k, v) {
            alert(k + ' ' + v);
        });
    });
    $.each(data.recent, function() {
        $.each(this, function(k, v) {
            alert(k + ' ' + v);
        });
    });
    $.each(data.old, function() {
        $.each(this, function(k, v) {
            alert(k + ' ' + v);
        });
    });    
});

J'ai imaginé trois boucles distinctes, car vous voudrez probablement traiter chaque ensemble de données différemment (justIn, recent, old). Sinon, vous pouvez faire:

$.getJSON("data.php", function(data){
    $.each(data, function(k, v) {
        alert(k + ' ' + v);
        $.each(v, function(k1, v1) {
            alert(k1 + ' ' + v1);
        });
    });
});
46
karim79

Code bref mais complet

Voici une solution hybride jQuery qui formate chaque "enregistrement" de données en un élément HTML et utilise les propriétés de ces données en tant que valeurs d'attribut HTML. 

Jquery each exécute la boucle interne; J'avais besoin de la variable JavaScript for habituelle sur la boucle externe pour pouvoir saisir le nom de la propriété (au lieu de la valeur) afin de l'afficher comme en-tête. Selon le goût, il peut être modifié pour un comportement légèrement différent.

Ceci est seulement 5 lignes principales de code mais enveloppées sur plusieurs lignes pour l'affichage:

$.get("data.php", function(data){

    for (var propTitle in data) {

        $('<div></div>') 
            .addClass('heading')
            .insertBefore('#contentHere')
            .text(propTitle);

            $(data[propTitle]).each(function(iRec, oRec) {

                $('<div></div>')
                    .addClass(oRec.textType)
                    .attr('id', 'T'+oRec.textId)
                    .insertBefore('#contentHere')
                    .text(oRec.text);
            });
    }

});

Produit la sortie 

(Remarque: j'ai modifié les valeurs de texte des données JSON en ajoutant un numéro au début pour assurer l'affichage des enregistrements appropriés dans le bon ordre, lors du "débogage")}

<div class="heading">
    justIn
</div>
<div id="T123" class="Greeting">
    1Hello
</div>
<div id="T514" class="Question">
    1What's up?
</div>
<div id="T122" class="Order">
    1Come over here
</div>
<div class="heading">
    recent
</div>
<div id="T1255" class="Greeting">
    2Hello
</div>
<div id="T6564" class="Question">
    2What's up?
</div>
<div id="T0192" class="Order">
    2Come over here
</div>
<div class="heading">
    old
</div>
<div id="T5213" class="Greeting">
    3Hello
</div>
<div id="T9758" class="Question">
    3What's up?
</div>
<div id="T7655" class="Order">
    3Come over here
</div>
<div id="contentHere"></div>

Appliquer une feuille de style

<style>
.heading { font-size: 24px; text-decoration:underline }
.Greeting { color: green; }
.Question { color: blue; }
.Order { color: red; }
</style>

pour obtenir un "bel" ensemble de données

alt text http://img14.imageshack.us/img14/1148/62593416.png

Plus d'informations
Les données JSON ont été utilisées de la manière suivante:

pour chaque catégorie (nom de clé sous lequel se trouve le tableau):

  • le nom de la clé est utilisé comme en-tête de section (par exemple justIn)

pour chaque objet contenu dans un tableau:

  • 'text' devient le contenu d'une div
  • 'textType' devient la classe de la div (accrochée à une feuille de style)
  • 'textId' devient l'identifiant de la div
  • par exemple. <div id = "T122" class = "Commande"> Venez ici </ div>
7
John K

Cela fonctionne pour moi:

$.get("data.php", function(data){
    var expected = ['justIn', 'recent', 'old'];
    var outString = '';
    $.each(expected, function(i, val){
        var contentArray = data[val];
        outString += '<ul><li><b>' + val + '</b>: ';
        $.each(contentArray, function(i1, val2){
            var textID = val2.textId;
            var text = val2.text;
            var textType = val2.textType;
            outString += '<br />('+textID+') '+'<i>'+text+'</i> '+textType;
        });
        outString += '</li></ul>';
    });
    $('#contentHere').append(outString);
}, 'json');

Ceci produit cette sortie:

<div id="contentHere"><ul>
<li><b>justIn</b>:
<br />
(123) <i>Hello</i> Greeting<br>
(514) <i>What's up?</i> Question<br>
(122) <i>Come over here</i> Order</li>
</ul><ul>
<li><b>recent</b>:
<br />
(1255) <i>Hello</i> Greeting<br>
(6564) <i>What's up?</i> Question<br>
(0192) <i>Come over here</i> Order</li>
</ul><ul>
<li><b>old</b>:
<br />
(5213) <i>Hello</i> Greeting<br>
(9758) <i>What's up?</i> Question<br>
(7655) <i>Come over here</i> Order</li>
</ul></div>

Et ressemble à ceci:

  • justin:
    (123) Bonjour Salutation
    (514) Quoi de neuf? Question
    (122) Viens par ici Ordre
  • récent:
    (1255) Bonjour Salutation
    (6564) Quoi de neuf? Question
    (0192) Viens par ici Ordre
  • vieux:
    (5213) Bonjour Salutation
    (9758) Quoi de neuf? Question
    (7655) Viens par ici Ordre

Pensez également à définir la contentType comme 'json'

3
artlung

Mes solutions sur un de mes propres sites, avec un tableau:

$.getJSON("sections/view_numbers_update.php", function(data) {
 $.each(data, function(index, objNumber) {
  $('#tr_' + objNumber.intID).find("td").eq(3).html(objNumber.datLastCalled);
  $('#tr_' + objNumber.intID).find("td").eq(4).html(objNumber.strStatus);
  $('#tr_' + objNumber.intID).find("td").eq(5).html(objNumber.intDuration);
  $('#tr_' + objNumber.intID).find("td").eq(6).html(objNumber.blnWasHuman);
 });
});

sections/view_numbers_update.php Renvoie quelque chose comme:

[{"intID":"19","datLastCalled":"Thu, 10 Jan 13 08:52:20 +0000","strStatus":"Completed","intDuration":"0:04 secs","blnWasHuman":"Yes","datModified":1357807940},
{"intID":"22","datLastCalled":"Thu, 10 Jan 13 08:54:43 +0000","strStatus":"Completed","intDuration":"0:00 secs","blnWasHuman":"Yes","datModified":1357808079}]

Tableau HTML:

<table id="table_numbers">
 <tr>
  <th>[...]</th>
  <th>[...]</th>
  <th>[...]</th>
  <th>Last Call</th>
  <th>Status</th>
  <th>Duration</th>
  <th>Human?</th>
  <th>[...]</th>
 </tr>
 <tr id="tr_123456">
  [...]
 </tr>
</table>

Cela donne essentiellement à chaque ligne un identifiant unique précédé de 'tr_' pour permettre d'autres identifiants d'éléments numérotés, au moment du script du serveur. Le script jQuery obtient alors simplement cet élément TR_ [id] et remplit la cellule indexée correcte avec le retour json.

L’avantage, c’est que vous pouvez obtenir le tableau complet à partir de la base de données, et soit foreach ($ array as $ record) pour créer la table html, OR (s’il existe une demande de mise à jour), vous pouvez mourir (json_encode ( $ array)) avant d’afficher la table, tous dans la même page, mais le même code d’affichage.

0
Florian Mertens