Я пытаюсь использовать jQuery each
цикл, чтобы пройти этот JSON и добавить его к a div
именованный #contentHere
. JSON следующие:
{ "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" }
]
}
Я получаю этот JSON посредством использования этого кода:
$.get("data.php", function(data){
})
Какие-либо решения?
Попробуйте (непроверено):
$.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 запускает внутренний цикл; Мне нужен был обычный JavaScript
для
во внешнем цикле, чтобы иметь возможность захватывать имя свойства (вместо значения) для отображения в качестве заголовка. По вкусу его можно изменить для немного другого поведения.
Это только 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>
, чтобы получить «красивый» набор данных
Подробнее
Данные JSON использовались в следующим образом:
для каждой категории (имя ключа, под которым хранится массив):
для каждого объекта, содержащегося внутри массив:
Это работает для меня:
$.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>
И выглядит так:
Также не забудьте установите contentType
как 'json'