javascript - 外部 JSON データの取得

Question

作成中のアプリケーションの Web サイトから JSON データを取得して表示できる必要があります。アプリケーションに実装する前に、他の場所でテストして、その仕組みを理解していることを確認する必要があると考えました。次の HTML と JSON コードを作成してテストしましたが、アプリケーションを実行すると Uncaught TypeError: Cannot read property '0' of undefined at file:///android_asset/www/projectName.html:11 が発生します。違う？

HTML:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $.get('testData.json', function(data) {
                alert('get performed');
                var obj = eval ("(" + data + ")");
                $("p").html(obj.data_set[0].data1);
            });
        });
    });
</script>
</head>

<body>
<h2>Heading</h2>
<p>Display</p>
<button>Click me</button>
</body>
</html>

JSON ファイル:

[{"data_set":{"data1":"string","data2":null,"data3":22.0}}]

score 0 · Accepted Answer

$.get のデータ型を次のように変更または設定$.getします$.getJSON

アップデート

また、このように試したjsonを正しく解析していないことにも気付きました

 $.get('testData.json', function(data) {
     alert('get performed');
     $("p").html(obj[0].data_set.data1);
 },'json');

score 0 · Accepted Answer

eval不要なものを使用しています。JSON とは何か、およびその使用方法について読むことをお勧めします。

evalondataは既に JSON オブジェクトであるため、使用する必要はありません。data_setコードの問題は、のプロパティとしてアクセスしようとしていることですdata。ただし、data実際には名前のないオブジェクトが 1 つある配列です。そのオブジェクトには member がありdata_setます。は配列でdata_setはなくオブジェクトであるため、は使用できませんdata_set[0]。次のようなものが必要です。

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON('testData.json', function(data) {
            alert('get performed');
            $("p").html(data[0].data_set.data1);
        });
    });
});

このjsfiddleをチェックしてください

score 0 · Accepted Answer

この jsFiddle を参照してください: http://jsfiddle.net/7Uxtg/

データ構造全体をトラバースするコードをいくつか含めました (1 つの可能なパスだけではありません)。必要な部分を取ってください;-)

$(document).ready(function () {
    $("button").click(function () {
        $.ajax({
            url: '/gh/gist/response.json/37ab4c69a04628428ce2',
            dataType: 'json',
            success: function (json) {
                // to display everything
                /*$.each(json, function (k, v) {
                    $.each(v.data_set, function (key, value) {
                        $('p').append(value);
                    });
                });*/

                // to display just the string
                $('p').html(json[0].data_set.data1);
            }
        });
    });
});

javascript - 外部 JSON データの取得

3 に答える 3

Related

Reference