jQuery 'chaque' boucle avec un tableau JSON

bref code mais complet

ce qui suit est une solution jQuery hybride qui formate chaque" enregistrement " de données dans un élément HTML et utilise les propriétés des données comme valeurs d'attribut HTML.

le jquery each exécute la boucle intérieure; j'avais besoin du JavaScript régulier for sur la boucle extérieure pour pouvoir saisir le nom de la propriété (au lieu de la valeur) pour l'affichage comme titre. Selon le goût, il peut être modifié un peu comportement différent.

c'est seulement 5 lignes principales du code mais enveloppé 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

(Note: j'ai modifié les valeurs de texte des données JSON en préparant un numéro pour m'assurer que j'affichais les bons enregistrements dans la séquence appropriée - pendant que" 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" beau "jeu de données

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

Plus D'Information

Les données du JSON ont été utilisées de la manière suivante:

pour chaque catégorie (nom de clé sous lequel le tableau est placé):

• le nom de la clé est utilisé comme section titre (par exemple justIn )

pour chaque objet contenu dans un tableau:

• 'texte' devient le contenu d'un div
• 'textType" devient la classe de la div (accroché dans une feuille de style)
• 'textId" devient l'id de la div
• par exemple
  ici

ça marche 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');

produit ce résultat:

<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
  
  (514) Qu'est-ce qu'il y a? Question
  
  (122) venez ici ordre

• récents :
  
  (1255) Bonjour
  
  (6564) Qu'est-ce qu'il y a? Question
  
  (0192) venez ici ordre

• Vieux :
  
  (5213) Bonjour Salut
  
  (9758) Quoi de neuf? Question
  
  (7655) venir ici ordre

aussi, n'oubliez pas de mettre le contentType comme 'json'

Mes solutions dans 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_number_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}]

HTML table:

<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 id unique précédant avec 'tr_' pour permettre d'autres ID d'éléments numérotés, au moment du script du serveur. Le script jQuery reçoit alors juste cet élément TR_[id], et remplit la cellule indexée correcte avec le json retourner.

l'avantage est que vous pouvez obtenir le tableau complet à partir de la base de données, et soit foreach($array comme $record) pour créer la table html, ou (s'il y a une requête 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.