2017-04-14 14 views
0

WebブラウザにJSON情報を表示しようとしています。JSONがWebブラウザにアクセスして表示しています

JSONの形式は、私がテストし、「UL」

<html> 
<head> 
<script type="text/javascript" 
src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
     $.getJSON('CLEVERTITLE.json',function(data){ 
      console.log('success'); 
      $.each(data,function(index,data){ 
       console.log("entered each") 
       $('ul').append('<li>'+data.ts+' ' 
           +data.sensor_value+'</li>'); 
      }); 
     }).error(function(){ 
      console.log("ERROR") 
     }); 
    }); 
</script> 
</head> 
<body> 
    <ul></ul> 
</body> 
</html> 

私が使用しているノード、ライブサーバーなどのオブジェクトを表示するには、次のHTMLを使用してい

[ 
    { 
    "ts": "2016-10-10T04:40:06.567000", 
    "sensor_value": 9.7827 
    }, 
    { 
    "ts": "2016-10-10T04:40:16.613000", 
    "sensor_value": 9.80362 
    }, 
    { 
    "ts": "2016-10-10T04:40:26.660000", 
    "sensor_value": 9.80722 
    }, 
    { 
    "ts": "2016-10-10T04:40:36.600000", 
    "sensor_value": 9.77777 
    }, 
    { 
    "ts": "2016-10-10T04:40:46.643000", 
    "sensor_value": 9.79755 
    }, 
    { 
    "ts": "2016-10-10T04:40:56.580000", 
    "sensor_value": 9.91404 
    } 
] 

localhost:8080経由でファイルにアクセスするディレクトリから。

しかし、これを実行すると、「undefined undefined」のテキストが1つだけ表示されます。私は2016-10-10T04:40:46.643000 9.7777を表示したいと考えています。 「ts」と「sensor_value」のタグにもアクセスできれば、将来的には役立つかもしれません。これが非常に基本的であれば、ごめんなさい。

##########

EDIT:データの量が問題だったことが分かります。私は百万以上のデータポイントを表示しようとしていました。私はより合理的な数に量を減らしたとき、これは正しく働いた。答えた皆様に感謝します。

+0

あなたのjsonファイルにHTMLがアクセスできることを確認できますか? –

+0

あなたはたぶん疑問のデータを誤解しているかもしれません。もしそうでなければ何の出力も得られません。 –

+1

あなたのデータは実際に '{data:{{---}、{---}、{ - }]} '、これは結果に対して' undefined、undefined'を持つ単一の反復を説明します。 –

答えて

1

JSONが無効です。外部構造体はオブジェクト({})ではなく、配列([])でなければなりません。オブジェクトにはキーと値のペアのセットが含まれ、配列には値のリストが含まれます。次のように

正しい:

[ 
    { 
    "ts": "2016-10-10T04:40:06.567000", 
    "sensor_value": 9.7827 
    }, 
    { 
    "ts": "2016-10-10T04:40:16.613000", 
    "sensor_value": 9.80362 
    }, 
    { 
    "ts": "2016-10-10T04:40:26.660000", 
    "sensor_value": 9.80722 
    }, 
    { 
    "ts": "2016-10-10T04:40:36.600000", 
    "sensor_value": 9.77777 
    }, 
    { 
    "ts": "2016-10-10T04:40:46.643000", 
    "sensor_value": 9.79755 
    }, 
    { 
    "ts": "2016-10-10T04:40:56.580000", 
    "sensor_value": 9.91404 
    } 
] 
+0

私はちょうど実際のファイルの外側の[]に角括弧がある値のいくつかを取った。私はここで間違いを犯した。 –

+0

元のテキストを更新しました –

0

をあなたのJSONファイルは次のようにする必要があります:

[ 
    { 
    "ts": "2016-10-10T04:40:06.567000", 
    "sensor_value": 9.7827 
    }, 
    { 
    "ts": "2016-10-10T04:40:16.613000", 
    "sensor_value": 9.80362 
    }, 
    { 
    "ts": "2016-10-10T04:40:26.660000", 
    "sensor_value": 9.80722 
    }, 
    { 
    "ts": "2016-10-10T04:40:36.600000", 
    "sensor_value": 9.77777 
    }, 
    { 
    "ts": "2016-10-10T04:40:46.643000", 
    "sensor_value": 9.79755 
    }, 
    { 
    "ts": "2016-10-10T04:40:56.580000", 
    "sensor_value": 9.91404 
    } 
] 

はまた、あなたの<html>タグの前<!DOCTYPE html>を追加したり、他のそれは、ブラウザのコンソールで次のような警告を与えるだろう。

HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>". 
+0

質問とはどのように違いますか? –