CODEWITHSUNDEEP
jsonangularjs
John Westhoff
John Westhoff

Reputation: 212

JSON parsing with Angular

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...

Upvotes: 1

Views: 251

Answers (2)

Ren
Ren

Reputation: 1503

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;
   })
}]);

Upvotes: 0

Ilan Frumer
Ilan Frumer

Reputation: 32357

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 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.

Upvotes: 4

Related Questions