Pablo Francesca Pablo Francesca - 6 months ago 11
JSON Question

Angularjs - Instantiate array from JSON

I am merely trying to populate an array from an $http request and display the results in a table. Using Firebug, it seems to me that the data is being retrieved properly. See pictures for results.
DOM Results

Firebug Results

<html ng-app="myApp">
<script src=""></script>

var app = angular.module('myApp', []);

app.controller('ContactsController', function ($scope, $http)
{ var self = this; //added after initial post.
this.contactList = [];
this.InitiateContactList = function(arrayContacts) //this.InitiateContactList doesn't work?
{ for(i = 0; i < arrayContacts.length; i++)

method: 'GET',
url: 'someurl', //pseudoCode
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function successCallback(response)
{ if(angular.isArray(
{ //this.contactList =; //is this working properly?
self.contactList = angular.fromJson(;
}, function errorCallback(response) {

app.controller('ActionsController', function ($scope, $http)

<body ng-controller="ActionsController as ActCtrl">

<div ng-controller="ContactsController as ContactsCtrl">
<tr><th Email</th>
<div ng-repeat="Contact in ContactsCtrl.contactList">
<table >
<tr><td>{{Contact.Email}}</td><td>test name</td><td>{{Contact.Frequency}}</td></tr>

this.contactList = angular.fromJson(; seems to be working. The DOM array is populated as expected, but the ng-repeat doesn't seem to be working. I've done this procedure a couple other times in other contexts and it has worked as expected. What am I missing?

Update: The Batarang extension in Chrome shows the following:

Is it normal to have the index 'Contact' showing like that?


In your ContactsController, do this

var self = this; 

Now use self instead of all this in your controller:

    method: 'GET',
    url: 'someurl', //pseudoCode
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
}).then(function (response) {
    self.contactList = angular.fromJson(;

Hope that helps.