jQuery的通過JSON字典

對於這個JSON字典迭代，jQuery的通過JSON字典

{ 
"user":null, 
"currency":"EUR", 
"balance":0, 
"tranlist": [ 
    { "date":"323","address":"a"}, 
    { "date":"121","address":"s"}, 
] 
}

當我使用這個功能，我有問題，獲得交易列表

$(document.body).append($(
'<table>' + $.map(data, function(value,key){ 
    return '<tr><td>'+key+'</td><td>'+value+'</td></tr>' 
    }).join('')+'</table>' 
));

這裏是輸出：

currency EUR 
balance 0 
transactions [object Object],[object Object],[object Object],[object Object]

如何解決我的代碼？

來源

2013-01-08 Spring

您顯示的代碼（that I wrote in a previous answer）旨在用於快速預覽您的結構並作爲對象瀏覽的示例。

現在您必須針對您的問題制定一些更具體的代碼。例如：

$(document.body).append($(
    '<table>' + $.map(data, function(value,key){ 
     console.log(value); 
     return '<tr><td>'+key+'</td><td>' 
      + ((value && $.isArray(value)) 
       ? value.map(function(v){return v.date+':'+v.address}).join(', ') 
       : value 
      )+ '</td></tr>' 
     }).join('')+'</table>' 
    ));

Demonstration

你也可以設計一個通用的，遞歸函數的toString但除了調試（和console.log是更好），沒有太多的點。

來源

2013-01-08 14:19:57

TNX這個工作，但我困惑，爲什麼鍵顯示標題和值顯示值，而你的函數參數（值，鍵），但不（鍵，值） – Spring

因爲[$ .MAP]（HTTP：//api.jquery。com/jQuery.map /）傳遞鍵值之前的值。它與[anyArray.map]（https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/map）中的順序相同。 –

你也可以看看這個嗎？ tnx http://stackoverflow.com/questions/14236448/jqueery-mobile-changepage-does-not-work-properly – Spring

$(document.body).append(
    $('<table>').append(
     $.map(data, function (value, key) { 
     return $('<tr>').append($('<td>', {text: key})) 
         .append($('<td>', {text: value})); 
     }) 
    ); 
));

請注意，不建議從連接字符串構建HTML。與標記和數據$('<td>', {text: key})的分離構造的元件是最清潔的解決方案。

來源

2013-01-08 14:19:59 Tomalak

我不確定這是不值得推薦的。通常建議構建一個大的HTML字符串，而不是附加多個小元素。 –

@dystroy這不是我稱之爲好的做法。如果數據中包含用戶輸入或其他有趣的格式，那麼你就會以這種方式爲XSS攻擊打開一個洞，這顯然很糟糕。級聯（當正確完成時）碰巧快一點，所以它是*優化*。但在這種情況下，我會確保數據不包含HTML，這是大多數人忘記的一步。在大多數情況下，在頁面運行時間內擠出二十毫秒並不是必需的，所以我總是推薦乾淨而安全的方法。 – Tomalak

@Tomalak tnx但我沒有看到任何輸出，我錯過了什麼？ – Spring

不完全回答你的問題，而不是自己構建HTML我建議使用Pure JavaScript Template Engine（jQuery插件）。

引擎（一個jQuery插件）非常輕巧，對於您所做的工作類型（特別是遍歷子元素）非常適用。

我建議你花幾分鐘讀書，雖然Get Started頁面和幾個tutorials解釋迭代子元素。

例使用純

HTML代碼：

<div id="sample"> 
    <div class="currency">EUR</div> 
    <div class="balance">0</div> 
    <table> 
    <tr class="date"> 
     <td>date</td><td class="value"></td> 
    </tr> 
    <tr class="address"> 
     <td>address</td><td class="value"></td> 
    </tr> 
    </table> 
<div>

JavaScript代碼（請注意，在最後一條語句中使用data變量是一樣的一個在問題）

//declaration of the actions PURE has to do 
var directive = { 
    '.currency': 'currency', 
    '.balance': 'balance', 
    'table': { 
    'trans<-tranlist': { 
     'tr.date .value': 'trans.date', 
     'tr.address .value': 'trans.address' 
    } 
    } 
}; 

// note the use of render instead of autoRender 
$('#sample').render(data, directive);

輸出HTML將如下所示：

<div id="sample"> 
    <div class="currency"></div> 
    <div class="balance"></div> 
    <table> 
    <tr class="date"> 
     <td>date</td><td class="value">323</td> 
    </tr> 
    <tr class="address"> 
     <td>address</td><td class="value">a</td> 
    </tr> 
    <tr class="date"> 
     <td>date</td><td class="value">121</td> 
    </tr> 
    <tr class="address"> 
     <td>address</td><td class="value">s</td> 
    </tr> 
    </table> 
<div>

當然，你可以做更多的工作，如設置類從JSON對象或過濾項目等屬性

來源

2013-01-08 14:39:22 Tom

jQuery的通過JSON字典

回答

相關問題