how to assign $scope variable with json string

Question

In AngularJs , the following is working -

$scope.product= {items:[{itemname:'apple',itemdesc:'fruit'}]}

But I want to get $scope.product from json string as below -

var strJson = "{items:[{itemname:'apple',itemdesc:'fruit'}]}";
$scope.product=strJson;

is not working. All I have is a json string and I need to assign to $scope.product. I have used JSON.parse() and JSON.toJson(), but they are not working. I don't know what I'm doing wrong

Below is my exact code :

$http.get('/getItems').success(function(data) {
    var jsondata="{\items\:";
    jsondata+=JSON.stringify(data);
    jsondata+="}";
    jsondata=jsondata.replace(/"itemname"/g, 'itemname');
    jsondata=jsondata.replace(/"itemdesc"/g, 'itemdesc');

        // WORKING CODE
    $scope.product = {items:[{itemname:"apple",itemdesc:"fruit"}]}; 

        // NOT WORKING CODE
    var jsonObj = jsondata; 
    $scope.product = jsonObj;
});

tanmay · Accepted Answer · 2017-04-10 10:47:18Z

4

JSON standard expects values to have double quotes around it. So your JSON string isn't parsable JSON.

var mystr = '{"items": [{"itemname": "apple","itemdesc": "fruit"}]}';
console.log(JSON.parse(mystr))
console.log(typeof JSON.parse(mystr))

answered Apr 10, 2017 at 10:47

tanmay

7,9112 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sid Nalabandian Over a year ago

$http.get('/getItems').success(function(data) { var jsondata="{\items\:"; jsondata+=JSON.stringify(data); jsondata+="}"; jsondata=jsondata.replace(/"itemname"/g, 'itemname'); jsondata=jsondata.replace(/"itemdesc"/g, 'itemdesc'); // WORKING CODE $scope.product = {items:[{itemname:"apple",itemdesc:"fruit"}]}; // NOT WORKING CODE var jsonObj = jsondata; $scope.product = jsonObj; });

Jenny · Accepted Answer · 2017-04-10 10:43:07Z

1

I will suggest to use angular way to conver json to object:

$scope.product= "{items:[{itemname:'apple',itemdesc:'fruit'}]}";
$scope.product = angular.fromJson($scope.product);

And object to json as follow:

var strJson = angular.toJson($scope.product);

answered Apr 10, 2017 at 10:43

Jenny

6634 silver badges8 bronze badges

Comments

Sachila Ranawaka · Accepted Answer · 2017-04-10 10:48:24Z

1

Here is the problem. apparently, if you are using JSON.parse to convert a JSON string to JSON then your property names should be wrapped with double quotes instead of single quotes.

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.product= '{"items":[{"itemname":"apple","itemdesc":"fruit"}]}'
    $scope.product = JSON.parse($scope.product);
    
console.log($scope.product)
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 
</div>

edited Apr 10, 2017 at 10:48

answered Apr 10, 2017 at 10:39

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

2 Comments

Sachila Ranawaka Over a year ago

I just edited the answer. hope the downvoter will review this

Sid Nalabandian Over a year ago

Myexact problem is this : $http.get('/getItems').success(function(data) { var jsondata="{\items\:"; jsondata+=JSON.stringify(data); jsondata+="}"; jsondata=jsondata.replace(/"itemname"/g, 'itemname'); jsondata=jsondata.replace(/"itemdesc"/g, 'itemdesc'); // WORKING CODE $scope.product = {items:[{itemname:"apple",itemdesc:"fruit"}]}; // NOT WORKING CODE var jsonObj = jsondata; $scope.product = jsonObj; });

Srigar · Accepted Answer · 2017-04-10 10:39:47Z

0

You can use JSON.parse, find the answer below

var strJson = JSON.parse("{items:[{itemname:'apple',itemdesc:'fruit'}]}");

answered Apr 10, 2017 at 10:39

Srigar

1,6983 gold badges14 silver badges29 bronze badges

Comments

Anoop Singh · Accepted Answer · 2017-04-10 11:02:31Z

0

I think your string format is not correct, it should be like this.

var str = '{"items":[{"itemname":"apple","itemdesc":"fruit"}]}';
$scope.product = JSON.parse(str)

answered Apr 10, 2017 at 11:02

Anoop Singh

264 bronze badges

Comments

Parikshit Bhagawati · Accepted Answer · 2017-04-10 11:26:27Z

0

please use double quotes in the JSON (by escaping them). Then JSON.parse() will accept the input string appropriately and parse correctly. Also remove square brackets.

$scope.jsonString = "{\"items\":{\"itemname\":\"apple\",\"itemdesc\":\"fruit\"}}";

var test = JSON.parse($scope.jsonString);

on a side note you can also use JSON Lint to check if your JSON is valid.

Let me know if this helps.

edited Apr 10, 2017 at 11:26

answered Apr 10, 2017 at 11:10

Parikshit Bhagawati

1621 silver badge15 bronze badges

3 Comments

Parikshit Bhagawati Over a year ago

your parent node 'items' in the line - var jsondata="{\items\:"; does not contain double quotes. please try var jsondata="{\"items\":";. Also please check subsequent values to place double quotes. There is the escaping '\' character but not the character you will be escaping.

Sid Nalabandian Over a year ago

Please read the question once more. $scope.product = {items:[{itemname:"apple",itemdesc:"fruit"}]}; is working code

Parikshit Bhagawati Over a year ago

Your object works fine I get it. I was talking about the json 'STRING' which is giving you parsing errors - and which is your requirement am i correct ? The double quotes at the right places should solve the issue of parsing it. I tried it using JSON.parse() and it seems to be working fine. Let me know if I am missing something.

Collectives™ on Stack Overflow

how to assign $scope variable with json string

6 Answers 6

1 Comment

Comments

2 Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related