JSON parsing with Angular

Question

I've made a WebApi that serves out dat in JSON format:

[
    {
        "Onderwerpen": [
            {
                "Id": 1,
                "Omschrijving": "Onderwerp 1",
                "VolgNr": 1,
                "VergaderingenId": 1
            },
            {
                "Id": 2,
                "Omschrijving": "Onderwerp 2",
                "VolgNr": 2,
                "VergaderingenId": 1
            }
        ],
        "Id": 1,
        "Datum": "2014-02-01T00:00:00",
        "Status": 1
    },
    {
        "Onderwerpen": [
            {
                "Id": 3,
                "Omschrijving": "Onderwerp 3",
                "VolgNr": 1,
                "VergaderingenId": 3
            }
        ],
        "Id": 3,
        "Datum": "2014-01-05T00:00:00",
        "Status": 2
    },
    {
        "Onderwerpen": [],
        "Id": 5,
        "Datum": "2014-01-06T00:00:00",
        "Status": 2
    }
]

This is read by the following javascript:

function VergaderingCtrl($scope) {

  //  $scope.vergaderingen = [
  //{ text: 'learn angular', done: true },
  //{ text: 'build an angular app', done: false }];

    $scope.vergaderingen = $.getJSON("http://localhost:7286/api/vergaderingen");
    console.log($scope.vergaderingen);
    alert($scope.vergaderingen);
}

I try to put it on screen with:

<div ng-controller="VergaderingCtrl">
    <ul class="unstyled">
        <li ng-repeat="vergadering in vergaderingen">
            <span>{{vergadering.Datum}}</span>
        </li>
    </ul>
</div>

But the result is an unordered list with 18 empty list items. I've been trying to fix this for the last 2 hours, with no luck...

Which version of Angular are you using? I am surprised that it works at all because $.getJSON takes a callback and returns an jqXHR object which shouldn't be iterable at all, even if it is a promise. (Angular 1.2.x does not automatically expand promises in templates anymore). — musically_ut
– musically_ut, Commented Feb 17, 2014 at 16:36

Ilan Frumer · Accepted Answer · 2014-02-17 17:05:44Z

4

Just use $http like so

function VergaderingCtrl($scope, $http) {

  $http.get('http://localhost:7286/api/vergaderingen')
    .then(function(res){
      $scope.vergaderingen = res.data;
    });
}

If you insist on using `$.getJSON` then you should use a callback and also $scope.$apply

$.getJSON("http://localhost:7286/api/vergaderingen", function(data){
  $scope.$apply(function(){
    $scope.vergaderingen = data;
  })
});

These 18 items are jquery's promise object properties ( that's funny.. ) :

enter image description here

You probably ask yourself why you see only 18 inside ngRepeat but 21 in the console

The answer is that statusText/responseText/status are populated by the response and console.log is asynchronous.

edited Feb 17, 2014 at 17:05

answered Feb 17, 2014 at 16:38

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

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

1 Comment

John Westhoff Over a year ago

thanx for the feedback. I'll try youre suggestions tomorrow, when i'm back at work!

Ren · Accepted Answer · 2014-02-17 17:06:26Z

0

You can also try something like the below.

var app = angular.module('your app name', [/*inject any dependencies here*/]);

app.factory('VergaderingFactory', ['$http', function ($http) {
    return {
        getVergaderingen : function (callback) {
            $http.get('/api/vergaderingen').success(callback);
        }
    }
}]);

app.controller('VergaderingCtrl', ['$scope', 'VergaderingFactory', function($scope,VergaderingFactory ) {
VergaderingFactory.getVergaderingen (function (data) {
               $scope.Vergaderingen = data;
   })
}]);

answered Feb 17, 2014 at 17:06

Ren

1,5036 gold badges32 silver badges56 bronze badges

Collectives™ on Stack Overflow

JSON parsing with Angular

2 Answers 2

Just use $http like so

If you insist on using `$.getJSON` then you should use a callback and also $scope.$apply

These 18 items are jquery's promise object properties ( that's funny.. ) :

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Just use $http like so

If you insist on using $.getJSON then you should use a callback and also $scope.$apply

These 18 items are jquery's promise object properties ( that's funny.. ) :

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related

If you insist on using `$.getJSON` then you should use a callback and also $scope.$apply