Json rest client using angular js cannot populate data (Empty value)

Question

Please advice,

I am creating rest client with json output using angular js , although rest data has received, but it never populated correctly into view html.

is there any wrong $scope data defined at angular controller?

Below is the json rest output data.

{
 "Job": [
    {
        "id": "1",
        "prize": "car"
    }
       ]
}

and the javascript controller with name "some.js"

var app = angular.module("MyApp", []);

app.controller("PostsCtrl", function($scope, $http) {
$http.get('jsonURL').
success(function(data, status, headers, config) {
  $scope.posts = data.Job;
 }).
error(function(data, status, headers, config) {
 });
});

and html view

<!doctype html>
<html ng-app="MyApp">
<head>
    <title>Test AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
    <script src="some.js"></script>
</head>

<body>
    <div ng-controller="PostsCtrl">
        <ul ng-repeat="post in posts">
            <p>The ID is {{post.id}}</p>
            <p>The prize is {{post.prize}}</p>
        </ul>
    </div>
</body>
</html>

try upgrading version of angular library, version you have is not very current and goes back to early stages of angular. Also put at least a console.log call in error handler to see if it is firing — charlietfl
– charlietfl, Commented Sep 17, 2014 at 1:30

tommybananas · Accepted Answer · 2014-09-17 01:30:36Z

0

It looks ok to me. One thing you might need to check is that the http response has a content-type header of application/json, otherwise angular will not parse the data correctly.

Try this as a work-around:

var jsonResponse = eval('('+data+')');
$scope.posts = jsonResponse.Job;

Or just make sure your header is set correctly and you shouldn't have to do this.

answered Sep 17, 2014 at 1:30

tommybananas

5,7361 gold badge31 silver badges52 bronze badges

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

2 Comments

hadi Over a year ago

thanks for the idea.. with do modification at object controller and view, it can generate data; $scope.posts = data And at view do delete <ul ng-repeat="post in posts"> and modify <p>The ID is {{post.Job[0].id}}</p>. but this only generate 1st row data only. any idea how to generate all data within ng-repeat function?

tommybananas Over a year ago

I'm not exactly sure what you mean, you're accessing all the data using the 'post' variable generated by the ng-repeat.

Collectives™ on Stack Overflow

Json rest client using angular js cannot populate data (Empty value)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related