jQuery通过JSON字典进行迭代

Question

对于此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]

如何修复我的代码？

Answer 1

您显示的代码（ 我在上一个答案中编写的 ）旨在快速预览您的结构，并作为对象浏览的示例。

现在，您必须针对自己的问题编写一些代码。 例如 ：

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

示范

您还可以设计一个通用且递归的toString函数，但是除了调试（和console.log更好）之外，没有太多意义。

Answer 2

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

请注意，建议不要通过连接字符串来构建HTML。 用标记和数据$('<td>', {text: key})分开构造元素是最干净的解决方案。

Answer 3

不是完全回答您的问题，而是建议您使用纯JavaScript模板引擎 （jQuery插件）而不是自己构建HTML。

该引擎（一个jQuery插件）非常轻巧，非常适合您所做的工作类型（尤其是遍历子元素）。

我建议您通过“入门”页面和一些解释孩子元素上的迭代的教程，花一些时间来完成一些工作。

---

使用PURE的示例

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对象设置类属性或过滤项目等。