0

これをjqueryサイトからコピーしました。私はjsonデータをWebページに取得する方法を学ぼうとしています。日付は次の場所で検証されています：http：//jsonlint.com/

myスクリプトを実行した結果は次のとおりです。[オブジェクトオブジェクト][オブジェクトオブジェクト][オブジェクトオブジェクト][オブジェクトオブジェクト][オブジェクトオブジェクト]

データを解析する必要がありますか、それともgetJSONで解析しますか。
これは私が使用しているコードです：

<!doctype html> 
<html>
<head>

    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>

    <script type="text/javascript">
$.getJSON('data.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});
    </script>
</head>
<body>

</body>
</html>

トラブルシューティングのヒントは素晴らしいでしょうし、もちろん答えも素晴らしいでしょう！

data.json

[
    {
        "bytes": "476.577044"
    },
    {
        "bytes": "136113.5289"
    },
    {
        "bytes": "118870.8151"
    },
    {
        "bytes": "55001.67852"
    }
]

console.log（data）応答：

[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
JSON.html (line 14)
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
JSON.html (line 14)
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
JSON.html (line 14)
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
4

2 に答える 2

2

私も同じ問題を抱えていました。JSONPオブジェクトを挿入しconsole.log()、Chromeの開発者ツールでツリーを確認することで解決しました。そこで、「オブジェクト」は、パーサーがJSONファイル内のすべての異なるオブジェクトに付けた名前にすぎないことに気付きました。そのため、値をフェッチするときにそれを考慮する必要があります。

$(document).ready(function(){
    $.getJSON('data.json', function(data) {
      var items = [];

      $.each(data, function(key, val) {
        items.push('<li >' + data.object.bytes + '</li>');
      });

      $('<ul/>').addClass('my-new-list').html(items.join('')).appendTo('body');
    });
});

必要なデータは、 「配列内にあるオブジェクト」と呼ばれるオブジェクト内のキーと値のペアにあります（これは、実行時に循環されるものです$.each()） 。

したがって、JQueryにオブジェクトの内部を調べるように指示してから、検索するキーを指示する必要があります。

あなたが何になりたいのかよくわからないので、私はIDを入れませんでした。すべての要素にIDとして「バイト」を持たせたいだけですか？IDは一意である必要があります（少なくともこのhttp://css-tricks.com/the-difference-between-id-and-class/によると）

classバッチ全体でCSS/JQueryを実行できるようにする必要がある場合は、次のようなものを試すことができます。'<li class ="' + object.key + '">'

于 2012-12-06T09:47:25.287 に答える
1

かなり近いです、これを試してください:(ファイル "data.json"が有効なファイルである限り）

$(document).ready(function(){
    $.getJSON('data.json', function(data) {
      var items = [];

      $.each(data, function(key, val) {
        items.push('<li id="' + key + '">' + val + '</li>');
      });

      $('<ul/>').addClass('my-new-list').html(items.join('')).appendTo('body');
    });
});

編集

jsonの設定方法は$.each、オブジェクトを含む外部配列を反復処理します。これにより、key数値インデックスとval実際のオブジェクトが作成されます。そうは言っても、$.eachパーツを次のように変更します。

$.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val.bytes + '</li>');
});

トリックを行う必要があります

（補足：IDは数字で始めてはいけません）

于 2012-04-09T14:36:11.480 に答える