Angularjs - Instantiate array from JSON

Question

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.

    <html ng-app="myApp">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <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++)
            this.contactList.push(arrayContacts[i]);
    };

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

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

    </script>
    </head>
    <body ng-controller="ActionsController as ActCtrl">

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

this.contactList = angular.fromJson(response.data); 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?

You've been already told about `this` reference: http://stackoverflow.com/questions/37638445/angularjs-updating-controller-variable-when-using-post#comment62758052_37638445 I see incorrect usage of `this` here as well. — Serhii Holinei, Jul 03 '16 at 19:54
@Sergey Goliney. Thank you for your help. The issue was a combination of your suggestion and a correction on the server side. It's likely that the data wasn't formatted as JSON properly, because it works fine when using PHP mysqli_fetch_assoc but not mysqli_fetch_array. — Pablo Francesca, Jul 03 '16 at 20:52

score 1 · Accepted Answer · edited Jul 03 '16 at 19:57

1

In your ContactsController, do this

var self = this;

Now use self instead of all this in your controller:

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

Hope that helps.

edited Jul 03 '16 at 19:57

Serhii Holinei

5,758
2
32
46

answered Jul 03 '16 at 19:51

adiinstack

96
5

I had tried that earlier. I added your suggestion again after the line declaring the contactList array. I still get the same behavior. DOM object is populated, but ng-repeat doesn't show anything. I even added some test code to print the index of the contactList for ng-repeat. It's like the ng-repeat loop isn't working. I'm assuming that contactList is an array of objects. Maybe angular is seeing it as an array of length one? – Pablo Francesca Jul 03 '16 at 20:06
1

@PabloFrancesca Do you apply `ng-repeat` on `` instead of `` intentionally?
– Serhii Holinei Jul 03 '16 at 20:08
Correction. I was wrong. Your suggestion now has the ng-repeat working, but the Contact.email and Contact.Frequency are not resolving. – Pablo Francesca Jul 03 '16 at 20:16
I've tried the ng-repeat on both and the encapsulating . They produce the same ng-repeat behavior as the initial code. This is as expected I think?. – Pablo Francesca Jul 03 '16 at 20:23

score 1 · Answer 2 · answered Jul 03 '16 at 19:56

this.contactList = angular.fromJson(response.data);

In this instance, this refers to the function prototype of the anonymous callback function from the then() call. Be careful in Javascript when using the word this in many callbacks and such. Declare a variable, and assign the needed function prototype, and then reference that variable, instead of the reserved, ever-changing this keyword.

Angularjs - Instantiate array from JSON

2 Answers2