2

对于这个 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]

如何修复我的代码？

4

3 回答 3

6

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

现在您必须使一些代码更具体地解决您的问题。例如 ：

  $(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更好）之外，没有多大意义。

于 2013-01-08T14:19:57.727 回答
4 
$(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-08T14:19:59.630 回答
2

不完全回答您的问题，而是建议您使用纯 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 对象设置类属性或过滤项目等。

于 2013-01-08T14:39:22.953 回答