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

あなたの質問に正確に答えるわけではありませんが、自分で HTML を作成する代わりに、そのためにPure JavaScript Template Engine (jQuery プラグイン) を使用することをお勧めします。

エンジン (jQuery プラグイン) は非常に軽量で、実行する種類のジョブ (特に子要素の反復処理) に最適です。

Get Startedページと、子要素の反復を説明するいくつかのチュートリアルに文字通り数分費やすことをお勧めします。

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 に答える