CODEWITHSUNDEEP
javascriptjsonangularjs
user3422841
user3422841

Reputation: 105

JSON.parse working with hardcoded strings but not with var

I am trying to read the length of array inside a JSON document, but whenever I keep the string hardcoded, it works but when I fetch the string from external source into a var and parse it it is not working. Can some one help me with this

Below is the source code of the .js file

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;   
}]);

whenever i try the above code, i am not getting the value in $scope.maxindex, but if i use the below code then this value gets populated correctly

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

Just checked the console log in chrome. below were the errors

If I put $scope.product=JSON.parse(product_str) in the callback function then below errors are thrown

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)

If I put $scope.product=JSON.parse(product_str) outside the callback function then below error is thrown

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

Upvotes: 0

Views: 1120

Answers (1)

Treesrule14
Treesrule14

Reputation: 711

From the angular documentation

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

Basically you need to wait for the get method to be exectued. As such you shoudl put the line $scope.product=JSON.parse(product_str) in the callback function.

Ideally you would also have an error function.

Upvotes: 1

Related Questions