How can I access value in json in AngularJS

Question

I am using nodeJS so the server will send the following json object to controller by doing:

data = {
    "question": "theQuestion",
    "answer": "theAnswer"
};
res.json(data);

Then in the controller, I want to manipulate the variable like:

data = QA.get();
$scope.q = data[question] + "Some additional info here";

QA is the service defined as:

angular.module('questionServices', ['ngResource'])
.factory('QA', function  ($resource) {
    return $resource('/qa');
});

However, the error message always tells me that data[question] is undefined. What is the right way to access the value? I have tried data.question. It doesn't work either.

I know I can simply show the json values by using ng-repeat in html but I want to be more flexible managing the values.

do you have a fiddle? Have you inspected what data is? What is QA.get returning? Is QA.get async? — Evil Buck
– Evil Buck, Commented Nov 13, 2014 at 3:51
I have tried console.log(data) and in html {{console|json}}. console gives me things like e{$promise: Promise, $resolved: false,...} and somewhere in there is my object. {{console|json}} gives a totally normal result: {"question": "QuestionHere", "answer": "answerHere"}. The weird thing is, using ng-repeat to showcase the values is totally fine, but accessing the value in the controller just doesn't work. — Bones and Teeth
– Bones and Teeth, Commented Nov 13, 2014 at 4:05

Tyler.z.yang · Accepted Answer · 2014-11-13 04:15:49Z

Seems you QA function you use $http or $resource to get the ajax response.

If you return $http.get/$http.post in you QA service, you can use this code to handle the json response:

QA.get().success(function(data){
    console.log(data);
    console.log(data.answer);
}).error(functoin(data){
    //handle error here.
});

If you use $resource in your QA service, then you can use this code to handle that:

QA.get().$promise.then(function(data){
     console.log(data);
     console.log(data.answer);
}).then(function(error){
     //handler error here.
});

Here is $http document.

Here is $resource document.

P.S you need to understand in ajax, javascript handle the request in async. That means when exec these code:

$scope.data = QA.get()
console.log($scope.data);  // QA.get()  send a http request. Now data is still promise object.

you cannot get this response immediately. So if you try to log the data, or use console.log(data.answer) to get data.answer. you will get undefined

However in you html view. You can get the data with {{data|json}} . This is because angular will $watch your data. And once data($resource promise object) is change(means http request is finished), Angular will render your view automatically.

That's why in your view you can get data.answer. But in your controller, you cannot.

oori · Accepted Answer · 2014-11-13 03:27:13Z

0

$scope.data = QA.get();
console.log(data);

or in your template:

{{data | json}}

This will give you a hint

answered Nov 13, 2014 at 3:27

oori

5,7511 gold badge34 silver badges37 bronze badges

2 Comments

Bones and Teeth Over a year ago

This is not what I want. I have already successfully displayed the data. What I want is to manipulate the values in controller for other uses. I used console.log(data), it seems there are many other attributes like $promise and stuff. I am so confused probably I can't do it this way.

Bones and Teeth Over a year ago

Say, by using {{data | json}}, I have { "question": "QuestionHere", "answer": "answerHere" } shown up. But then if I do $scope.ans = data.answer or $scope.ans = data["answer"] nothing shows up and console.log($scope.ans) gives undefined. :/

Collectives™ on Stack Overflow

How can I access value in json in AngularJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related