0

jQuery を使用して、JSON txt ファイルから特定のデータを取得し、それを Web ページに表示しています。データは期待どおりにページに表示されますが、HTML/CSS でフォ​​ーマットする必要があります。p や div などの HTML タグを追加すると、ページに「未定義」が数回表示されます。これはおそらく私が見落としている非常に単純なものですが、これまでのところ、他の投稿から試したすべての提案は機能していません. 私はjquery-1.9.1.minを使用していますが、これはコードです:

$(document).ready(function(){
$.getJSON('cache/bitly-click-rate.txt', function(data){
       $.each(data, function(index, item){
               $('#bitly-click-rate').append('<p>' + item.phrase + '</p><p>' + item.rate + '</p>');
      });
    })
 })

以下は、Web ページに表示される内容のスクリーンショットです。 ここに画像の説明を入力

JSON コードを確認しましたが、有効です。ただし、役立つ場合は、JSON コードを次に示します。

{"status_code": 200, "data": {"phrase": "obama", "rate": 0.062096999999999999, "lag": 5, "time": 1360459793}, "status_txt": "OK"}

ここで何が欠けているのか誰かが教えてくれることを願っています...助けてくれてありがとう。

更新: 迅速な対応に感謝します。返された JSON データが配列ではなく単一のオブジェクトであるため、問題が発生していると思われるため、jQuery コードを更新しました。私が使用していた jQuery コードは、JSON 配列用です。Vlad の回答に基づいて jQuery コードを更新しました。

$(document).ready(function() {
    $.getJSON('cache/bitly-click-rate.txt', function(data) {
              $('#bitly-click-rate').append('<p> Phrase: ' + data.phrase + '</p>' + '<p> Rate: ' + data.rate + '</p>');
    });
});

データはまだ Web ページで未定義として表示されています。スクリーンショットを次に示します。 ここに画像の説明を入力

上記のコードは機能するはずです。私は調査してきましたが、これまでのところコードの提案のほとんどは JSON 配列用です。更新されたコードが機能しない理由について何か考えがあれば教えてください。ありがとう！

4

3 に答える 3

1

返された JSON データは、配列ではなく単一のオブジェクトです。

{"status_code": 200, "data": {"phrase": "obama", "rate": 0.062096999999999999, "lag": 5, "time": 1360459793}, "status_txt": "OK"}

eachしたがって、この場合は使用する必要はありません。プロパティに直接アクセスできます：

$.getJSON('cache/bitly-click-rate.txt', function(result){
    $('#bitly-click-rate').append('<p>' + result.data.phrase + '</p><p>' + result.data.rate + '</p>');
})

JSON に項目の配列がある場合、次のようになります。

{
    "status_code": 200,
    "data": {
        "phrases": [
            {
                "phrase1": "obama",
                "rate": 0.062097,
                "lag": 5,
                "time": 1360459793
            },
            {
                "phrase2": "clinton",
                "rate": 0.062097,
                "lag": 5,
                "time": 1360459793
            }
        ]
    },
    "status_txt": "OK"
}

そうして初めて、反復するものがあります。

$.getJSON('cache/bitly-click-rate.txt', function(result){
    $.each(result.data.phrases, function(index, item){
        $('#bitly-click-rate').append('<p>' + item.phrase + '</p><p>' + item.rate + '</p>');
    });
})
于 2013-02-11T01:59:27.933 に答える
0

これを試して：

$(document).ready(function(){
$.getJSON('cache/bitly-click-rate.txt', function(data){
       $.each(data.data, function(index, item){
               $('#bitly-click-rate').append('<p>' + item.phrase + '</p><p>' + item.rate + '</p>');
      });
    })
 })

表示することに関心のあるオブジェクトは、コールバック ( ) の最上位オブジェクトではなく (私は推測しています)、その中で名前がdata付けられたプロパティdataであるためです。

于 2013-02-11T01:18:58.040 に答える
0

現在、返された JSON データ要素を要素ごとに繰り返し処理しています。最初の要素は次のとおりです。

data.status_code

値は 200 です。そして 200.phrase は意味をなさないため、未定義です。

于 2013-02-11T01:20:15.550 に答える