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: stackoverflow.com/questions/37638445/… I see incorrect usage of this here as well. — Serhii Holinei
– Serhii Holinei, Commented Jul 3, 2016 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
– Pablo Francesca, Commented Jul 3, 2016 at 20:52

Serhii Holinei · Accepted Answer · 2016-07-03 19:57:25Z

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 3, 2016 at 19:57

Serhii Holinei

5,8842 gold badges34 silver badges49 bronze badges

answered Jul 3, 2016 at 19:51

adiinstack

965 bronze badges

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

4 Comments

Pablo Francesca Over a year ago

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?

Serhii Holinei Over a year ago

@PabloFrancesca Do you apply ng-repeat on <table> instead of <tr> intentionally?

Pablo Francesca Over a year ago

Correction. I was wrong. Your suggestion now has the ng-repeat working, but the Contact.email and Contact.Frequency are not resolving.

Pablo Francesca Over a year ago

I've tried the ng-repeat on both <tr> and the encapsulating </div>. They produce the same ng-repeat behavior as the initial code. This is as expected I think?.

Alex · Accepted Answer · 2016-07-03 19:56:25Z

1

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.

answered Jul 3, 2016 at 19:56

Alex

14.7k5 gold badges45 silver badges60 bronze badges

Collectives™ on Stack Overflow

Angularjs - Instantiate array from JSON

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related