JSON.parse使用硬编码字符串但不使用var

时间:2015-05-04 15:55:14

标签: javascript json angularjs

我正在尝试读取JSON文档中的数组长度,但每当我保持字符串硬编码时,它都有效,但是当我从外部源获取字符串到var并解析它时它不起作用。有人可以帮助我吗

以下是.js文件的源代码

var app=angular.module('product',[]);
app.controller('ProductCtrl',['$scope','$location','$http',function($scope,$location,$http) {
var url=$location.absUrl();
var baseurl='/products';
var indx=url.indexOf(baseurl) + baseurl.length + 1;
var name=url.substr(indx);
var resp=$http.get("/getProductDetails/" + name);   
//sample product
//{ "ProductName" : "Chains" , "Index" : 16 , "Images" : [ "IMG_07.jpg" , "IMG_08.jpg" , "IMG_05.jpg" , "IMG_04.jpg" , "IMG_03.jpg" , "IMG_06.jpg" , "IMG_02.jpg" , "IMG_01.jpg"]}
var product_str='';     
resp.success(function(data) {product_str = data;}); 
$scope.product=JSON.parse(product_str);
$scope.minindex=1;
$scope.maxindex=$scope.product.Images.length;   
}]);

每当我尝试上面的代码时,我都没有得到$ scope.maxindex中的值,但是如果我使用下面的代码,那么这个值会被正确填充

var product_str='{ "ProductName" : "Chains" , "Index" : 16 , "Images" : [ "IMG_07.jpg" , "IMG_08.jpg" , "IMG_05.jpg" , "IMG_04.jpg" , "IMG_03.jpg" , "IMG_06.jpg" , "IMG_02.jpg" , "IMG_01.jpg"]}';     
//resp.success(function(data) {product_str = data;});

刚刚检查了控制台登录chrome。以下是错误

如果我在回调函数中放入$ scope.product = JSON.parse(product_str),则会抛出以下错误

TypeError: Cannot read property 'Images' of undefined
    at new <anonymous> (productDetail.js:23)
    at Object.e [as invoke] (angular.js:4182)
    at $get.z.instance (angular.js:8445)
    at angular.js:7697
    at s (angular.js:331)
    at v (angular.js:7696)
    at g (angular.js:7075)
    at angular.js:6954
    at angular.js:1451
    at l.$get.l.$eval (angular.js:14388)(anonymous function) @ angular.js:11598$get @ angular.js:8548$get.l.$apply @ angular.js:14489(anonymous function) @ angular.js:1449e @ angular.js:4182d @ angular.js:1447sc @ angular.js:1467Jd @ angular.js:1361(anonymous function) @ angular.js:26086a @ angular.js:2741c @ angular.js:3011
angular.js:11598 SyntaxError: Unexpected token o
    at Object.parse (native)
    at http://localhost:8080/js/productDetail.js:12:25
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:81:199
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:112:343
    at l.$get.l.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:126:193)
    at l.$get.l.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:123:286)
    at l.$get.l.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:126:471)
    at l (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:81:489)
    at O (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:86:99)
    at XMLHttpRequest.w.onload (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:87:124)

如果我将$ scope.product = JSON.parse(product_str)放在回调函数之外,则会抛出以下错误

SyntaxError: Unexpected end of input
    at Object.parse (native)
    at new <anonymous> (http://localhost:8080/js/productDetail.js:15:22)
    at Object.e [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:37:96)
    at $get.z.instance (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:76:261)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:59:206
    at s (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:7:408)
    at v (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:59:190)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:52:9)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:51:118
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:17:492(anonymous function) @ angular.js:11598$get @ angular.js:8548$get.l.$apply @ angular.js:14489(anonymous function) @ angular.js:1449e @ angular.js:4182d @ angular.js:1447sc @ angular.js:1467Jd @ angular.js:1361(anonymous function) @ angular.js:26086a @ angular.js:2741c @ angular.js:3011

1 个答案:

答案 0 :(得分:1)

来自角度文档

  

成功和错误方法只需要一个参数 - 一个函数   将在请求成功或失败时被调用。

基本上你需要等待get方法被激活。因此,您应该将行$scope.product=JSON.parse(product_str)放在回调函数中。

理想情况下,您还会有错误功能。