Using json array returned from rest api in angular for a table?

Question

I have the following json structure which came with the template I am using :

$scope.details = [
    {
        name: 'jim'
        age: '21'
    },
    {
        name: 'mike';
        age: '60'
    }
];

The array actually works for what is needed - but the trouble is that it is hardcoded, so I have a http get which returns the following when stringified :

"[
    {
        "name": "Jim",
        "age" : "21"
    },
    {
        "name": "Mike",
        "age" : "60"
    }
]"

The code which I am using to get my json from the rest API is as follows :

    $http.get('http://localhost:8080/users/getAll').
        success(function(data) {
            console.log(JSON.stringify(data));
        });

Now, I want to set $scope.details with the info from the rest call instead of the hard coded arrays... and when I set it inside the http get, I get the error that $scope.details is undefined! :( Example :

    $http.get('http://localhost:8080/users/getAll').
        success(function(data) {
            $scope.details = data;
        });

All help is appreciated!

I don't see a problem with the rest of your code, where do you get the error? — DonJuwe, Feb 09 '15 at 14:46
give me a moment and I will pastebin the javascript file along with the error - as that might be more helpful — Slippy, Feb 09 '15 at 14:55
Pastebin of entire js source file : http://pastebin.com/rxhpjhv4 Error : Error: $scope.filteredStores is undefined — Slippy, Feb 09 '15 at 15:00
Try to put `$scope.filteredStores = [];` right at the beginning of your `init()` function — DonJuwe, Feb 09 '15 at 15:05
Think you're calling init before you receive the API response. Try moving the `$http` call to the bottom and move `init()` to the `success` callback — Nick Zhu, Feb 09 '15 at 15:58

score -1 · Answer 1 · answered Feb 09 '15 at 15:08

-1

This may be a case that AJAX call is running in background and your other code is getting executed.

Check if Ajax is successfully getting the data:

$http.get('http://localhost:8080/users/getAll').
        success(function(data,status) {
            $scope.details = data;
            console.log($scope.details)
        });

Are you using Service or Factory for handling AJAX ?

answered Feb 09 '15 at 15:08

Yameen

585
1
6
17

I definitely get all my data back, the json I provided in the question was from the console.log that I had added temporarily. – Slippy Feb 09 '15 at 15:12
1

If you are getting the data, then where do u get $scope.details as undefined ? I can give u a simple scenario where you may get $scope.details as undefined : step1: Do the ajax and getting the value in $scope.details step2: Using the $scope.details json fetched from above ajax. Here you may get an undefined value because the Ajax may be still running in background and may not have finished yet. Can u check the sequence of your code and let me know. – Yameen Feb 10 '15 at 07:15
You can also try using a watch on $scope.details. – Yameen Feb 10 '15 at 07:21

Using json array returned from rest api in angular for a table?

1 Answers1