javascript - JSON.parse 适用于硬编码字符串，但不适用于 var

Question

我正在尝试读取 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

Answer 1

来自 Angular 文档

The success and error methods take a single argument - a function that will be called when the request succeeds or fails respectively.

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

理想情况下，您还应该有一个误差函数。