jQuery’每个’循环使用JSON数组
我正在尝试使用jQuery的each循环来遍历此JSON并将其添加到名为#contentHere的div 。 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，recent，old）。 如果没有，你可以这样做：
$.getJSON("data.php", function(data){ $.each(data, function(k, v) { alert(k + ' ' + v); $.each(v, function(k1, v1) { alert(k1 + ' ' + v1); }); }); });
简短的代码，但function齐全
以下是混合jQuery解决方案，它将每个数据“记录”格式化为HTML元素，并将数据属性用作HTML属性值。
each jquery运行内循环; 我需要在外部循环上使用常规JavaScript来获取属性名称（而不是值）以显示为标题。 根据品味，它可以修改为略有不同的行为。
这只是5行主要代码，但包含在多行上以供显示：
$.get("data.php", function(data){ for (var propTitle in data) { $('') .addClass('heading') .insertBefore('#contentHere') .text(propTitle); $(data[propTitle]).each(function(iRec, oRec) { $('') .addClass(oRec.textType) .attr('id', 'T'+oRec.textId) .insertBefore('#contentHere') .text(oRec.text); }); } });
产生输出
（注意：我通过添加一个数字来修改JSON数据文本值，以确保我以正确的顺序显示正确的记录 – 而“调试”）
justIn 1Hello 1What's up? 1Come over here recent 2Hello 2What's up? 2Come over here old 3Hello 3What's up? 3Come over here
应用样式表
获得“漂亮”的数据集
alt text http://img14.imageshack.us/img14/1148/62593416.png
更多信息
JSON数据以下列方式使用：
对于每个类别（数组所在的键名）：
- 键名用作节标题（例如justIn ）
对于数组中保存的每个对象：
- ‘text’成为div的内容
- ‘textType’成为div的类（挂钩到样式表）
- ‘textId’成为div的id
- 例如
来这里
这对我有用：
$.get("data.php", function(data){ var expected = ['justIn', 'recent', 'old']; var outString = ''; $.each(expected, function(i, val){ var contentArray = data[val]; outString += '- ' + val + ': '; $.each(contentArray, function(i1, val2){ var textID = val2.textId; var text = val2.text; var textType = val2.textType; outString += '
('+textID+') '+''+text+' '+textType; }); outString += '
'; }); $('#contentHere').append(outString); }, 'json');
这会产生以下输出：
- justIn:
(123) Hello Greeting
(514) What's up? Question
(122) Come over here Order
- recent:
(1255) Hello Greeting
(6564) What's up? Question
(0192) Come over here Order
- old:
(5213) Hello Greeting
(9758) What's up? Question
(7655) Come over here Order
看起来像这样：
- 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); }); });
sections / 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表格：
[...] [...] [...] Last Call Status Duration Human? [...] [...]
这基本上为每一行提供了一个唯一的id，前面带有’tr_’，以便在服务器脚本时允许其他编号的元素id。 然后，jQuery脚本只获取此TR_ [id]元素，并使用json返回填充正确的索引单元格。
优点是你可以从数据库中获取完整的数组，并且foreach（$ array as $ record）创建表html，或者（如果有更新请求）你可以在显示之前死掉（json_encode（$ array））表格，都在同一页面，但相同的显示代码。