[英]jQuery 'each' loop with JSON array
我正在嘗試使用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);
});
});
});
以下是混合jQuery解決方案,它將每個數據“記錄”格式化為HTML元素,並將數據屬性用作HTML屬性值。
each
jquery運行內循環; 我需要常規的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>
獲得“漂亮”的數據集
更多信息
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'
我在自己的一個站點中使用表格的解決方案:
$.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表格:
<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>
這基本上為每行提供了一個唯一的id,前面帶有'tr_',以便在服務器腳本時允許其他編號的元素id。 然后,jQuery腳本只獲取此TR_ [id]元素,並使用json返回填充正確的索引單元格。
優點是你可以從數據庫獲取完整的數組,並且foreach($ array as $ record)創建表html,或者(如果有更新請求)你可以在顯示之前死掉(json_encode($ array))該表,都在同一頁面中,但顯示相同的代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.