2012-07-30 92 views
0

我需要能够检索并显示来自我正在制作的应用程序的网站的JSON数据。在将其应用到我的应用程序之前,我认为我应该确保通过在其他地方测试它了解它是如何工作的。我做了下面的HTML和JSON代码来测试它,但是如果我运行应用程序,我会得到Uncaught TypeError:无法读取属性'0'undefined在file:///android_asset/www/projectName.html:11 我是什么做错了?检索外部JSON数据

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}}] 
+0

你正在使用'eval',这是不必要的。我建议你阅读[JSON是什么以及如何使用它](http://www.copterlabs.com/blog/json-what-it-is-how-it-works-how-to-use-it/ ) – xdumaine 2012-07-30 19:36:58

回答

0

更改$.get$.getJSON或设置在$不用彷徨的数据类型,这样调用

UPDATE

我也意识到,你不能正确解析试过这样

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

将'$ .get'更改为'$ .getJSON'会给我提供错误未捕获的语法错误:意外的文件标识符:///android_asset/www/projectName.html:1 – Alwaysdeadfred 2012-07-30 19:27:41

+0

检查我的更新回答 – Jorge 2012-07-30 19:31:27

+0

这可行,但是我如果我包含''json''或将url更改为我正在尝试访问的实际网站,我的最后一条评论中仍然会出现错误。该网站的json数据的结构与我给出的样本相同。 – Alwaysdeadfred 2012-07-30 19:44:12

0

您使用eval这是不必要的JSON。我建议你阅读约what JSON is and how to use it

您不需要在data上使用eval,因为它已经是JSON对象。你的代码存在的问题是你试图访问data_set作为data的属性。但是,data确实是一个数组,有一个未命名的对象。该对象的成员为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); 
     }); 
    }); 
});​ 

退房this jsfiddle

+0

使用'data [0]'而不是'data_set [0]'作为Jorge上面提到的,但删除'var obj = eval(“(”+ data +“)”);'并将它下面的行改为' $(“p”)。html(data [0] .data_set.data1);'给我错误Uncaught TypeError:无法读取属性'data1'undefined在file:///android_asset/www/projectName.html:10 – Alwaysdeadfred 2012-07-30 20:21:27

+0

我复制了我发布的确切JSON数据,并将其粘贴回testData.json,然后将第二组脚本标记与您在原始评论中提供的代码之间的代码替换,但仍然出现该错误。但是,如果我将'$ .get'更改为'$ .getJSON',那么它就可以工作。 – Alwaysdeadfred 2012-07-31 14:40:45

0

看到这个jsFidle:http://jsfiddle.net/7Uxtg/

我包括一些代码来遍历整个数据结构(不只是一个可能的路径)。拿你需要的部分;-)

$(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); 
      } 
     }); 
    }); 
});