Цикл jQuery «каждый» с массивом JSON

Попробуйте (не проверено):

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

Я подумал, что это три отдельных цикла, поскольку вы, вероятно, захотите обрабатывать каждый набор данных по-разному (justIn, недавний, старый). Если нет, вы можете сделать:

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

Краткий код, но полнофункциональный

Ниже приведено гибридное решение jQuery, которое форматирует каждую «запись» данных в элемент HTML и использует свойства данных в качестве значений атрибутов HTML.

jquery each запускает внутренний цикл; Мне нужен был обычный JavaScript for во внешнем цикле, чтобы иметь возможность получить имя свойства (вместо значения) для отображения в качестве заголовка. По вкусу его можно изменить для немного другого поведения.

Это всего 5 основных строк кода, но они заключены в несколько строк для отображения:

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

});

Производит вывод

(Примечание: я изменил текстовые значения данных JSON, добавив число, чтобы убедиться, что я отображаю правильные записи в правильной последовательности - во время "отладки")

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

Применение таблицы стилей

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

чтобы получить "красивый" набор данных

Это работает для меня:

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

Это производит этот вывод:

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

И выглядит так:

• justIn:
  (123) Привет Приветствие
  (514) Как дела? Вопрос
  (122) Иди сюда Заказать

• последние:
  (1255) Здравствуйте Приветствие
  (6564) Что случилось? Вопрос
  (0192) Иди сюда Заказать

• старый:
  (5213) Здравствуйте Приветствие
  (9758) Как дела? Вопрос
  (7655) Иди сюда Заказать

Также не забудьте установить contentType как 'json'

Мои решения на одном из моих собственных сайтов с таблицей:

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

section/view_numbers_update.php Возвращает что-то вроде:

[{"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 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>

По сути, это дает каждой строке уникальный идентификатор, предшествующий «tr_», чтобы разрешить другие пронумерованные идентификаторы элементов во время серверного сценария. Затем сценарий jQuery просто получает этот элемент TR_[id] и заполняет правильную проиндексированную ячейку возвратом json.

Преимущество заключается в том, что вы можете получить полный массив из БД и либо foreach($array as $record), чтобы создать таблицу html, ИЛИ (если есть запрос на обновление), вы можете умереть(json_encode($array)) перед отображением таблица, все на той же странице, но тот же код отображения.