angular building an array with a for loop

Question

I'm building an array dynamically in a test angular app. Basically I have a scope function that generates an array of people and returns the array and I have an ng-repeat on the array. The array is not displaying but I'm not getting any errors in the console either, so idk what's up:

am I calling the getPerson function correctly? If there's a better way to do this do let me know.

heres the fiddle as well

$scope.person = {
        firstname: "",
        lastname: "",
        isActive: true,
        fullname: function() {
            var personobject;
            personobject = $scope.person;
            return personobject.firstname 
                + " " 
                + personobject.lastname;
        }
    };

$scope.people = function() {
        var pplArray = [];
        var firstnames = ['abdul','mahmud','gasser','ibtihaj','abudi'];
        var lastnames = ['ahmad','samrai','badawi','jasim','ahmad'];
        var actives = [true,true,false,true,false];
        for (var i = 0; i < firstnames.length; i++) {
            pplArray[i] = getPerson(firstnames[i], lastnames[i], actives[i]);
        }
        return pplArray;
    };
$scope.getPerson = function(first, last, active) {
        var newPerson = $scope.person;
        newPerson.firstname = first;
        newPerson.lastname = last;
        newPerson.isActive = active;
        return newPerson;
    };

$scope.people is the function that generates the array, not the array itself, and its never called. You prbly wan't to do $scope.people = (function() { ....})() which would call the function immediatly and set the return value as $scope.people. There are some other things that will not work, but if you call the method, you will get appropriate error messages. — Numyx
– Numyx, Commented Jun 12, 2015 at 23:26

Ana F · Accepted Answer · 2015-06-12 23:56:28Z

I've updated your fiddle here : https://jsfiddle.net/7j2khgbj/2/

var myapp = angular.module("myapp", []);
myapp.controller('appCont', function($scope) {

    var Person = function(){
        this.firstname = "";
        this.lastname = "";
        this.isActive = true;

    };

    Person.prototype.fullname = function() {
            return this.firstname 
                + " " 
                + this.lastname;
    };

    var getPerson = function(first, last, active) {
        var newPerson = new Person();
        newPerson.firstname = first;
        newPerson.lastname = last;
        newPerson.isActive = active;
        return newPerson;
    };    

    $scope.addPerson = function() {
        $scope.people.push({
            firstname: $scope.person.firstname,
            lastname: $scope.person.lastname
        });
        $scope.person.firstname = '';
        $scope.person.lastname = '';

    };

    $scope.people = (function() {
        var pplArray = [];
        var firstnames = ['abdul','mahmud','gasser','ibtihaj','abudi'];
        var lastnames = ['ahmad','samrai','badawi','jasim','ahmad'];
        var actives = [true,true,false,true,false];
        for (var i = 0; i < firstnames.length; i++) {
            pplArray[i] = getPerson(firstnames[i], lastnames[i], actives[i]);
        }
        return pplArray;
    })();


    /*$scope.people = [
        {firstname: 'abdul', lastname: 'ahmad'},
        {firstname: 'mahmud', lastname: 'samrai'},
        {firstname: 'gasser', lastname: 'badawi'},
        {firstname: 'ibtihaj', lastname: 'jasim'},
        {firstname: 'abudi', lastname: 'ahmad'},
        {firstname: 'ahmad', lastname: 'jasim'},
        {firstname: 'abdul', lastname: 'samrai'}
    ];*/
});

Some problems I saw:

1) $scope.people was a function, not an array (so I simply executed it and saved the result)

2) you were always overwriting the person (you need a Person class that creates new instances for the array element, not overwrite the same instance with new data - that way you'll get the same thing in all the array elements)

3) on $scope you should put things that need to be accessible from the view. Helper functions can just be local in the controller (if you don't want them as services, although as services they are reusable)

4) track by on ng-repeat (in case of duplicate keys)

Collectives™ on Stack Overflow

angular building an array with a for loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related