CODEWITHSUNDEEP
javascriptarraysangularjsangularjs-ng-repeatonsen-ui
Laureant
Laureant

Reputation: 1019

Dynamically add item to ng-repeat array javascript

I have to following array of items in angularjs

angular.module('app').controller('AppController', function ($scope, $timeout) {
    $scope.items = {
        item1: {
            name: "Hamburger",
            complete: "50%",
            start: "2015/09/10 11:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        },
        item2: {
            name: "Pasta",
            complete: "50%",
            start: "2015/09/10 11:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        },
        item3: {
            name: "Potato",
            complete: "80%",
            start: "2015/09/10 18:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        }
    };

    $scope.items.push({
        item4: {
            name: "Ham",
            complete: "50%"...
        }
    });
}

I want to add a new item to it, but it's not working.

I tried .push(item) method, but it fails with the following message in the console

Object doesn't support property or method 'push'

What's the easiest way to add an item to this existing array?

Upvotes: 0

Views: 5107

Answers (4)

superczan
superczan

Reputation: 306

As you have mentioned in the code, it's a javascript Object not an array. Only Array supports pushing. Declare your array as below:

$scope.items = [
        item1 : {
            name : "Hamburger",
            complete : "50%",
            start: "2015/09/10 11:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        },
        item2 : {
            name : "Pasta",
            complete : "50%",
            start: "2015/09/10 11:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        },
        item3 : {
            name : "Potato",
            complete : "80%",
            start: "2015/09/10 18:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        }
    ];

Now you can push new items and it will not throw the error.

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

As per your code $scope.items is an object and not as array. So $scope.items.push will throw an error.

You can either convert $scope.items to an array or use the $scope.items.item4 = { name: "Ham", complete: "50%"...}; to set the value.

Look at your data structure array makes more sense so that you can use the array methods.

angular.module('app').controller('AppController', function ($scope, $timeout) {
   $scope.items = [{
            name : "Hamburger",
            complete : "50%",
            start: "2015/09/10 11:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        }, ...];

   $scope.items.push({ name: "Ham", complete: "50%"...});    
});

Upvotes: 1

Paul Boutes
Paul Boutes

Reputation: 3315

Your $scope.items data is not an array, but an object. You declare it with { }, and object does not get .push() method.

If you want to use the Array.prototype.push() method, you have to delcare an array, so just change : 

$scope.items = { ..... };

By 

$scope.items = [ ..... ];

So you will be able to do :

$scope.items.push({item4 : { name: "Ham", complete: "50%"...}});

Upvotes: 1

oryol
oryol

Reputation: 5248

Actually you are using object (not an array)

Add value to object: $scope.items[key] = value;

OR

Initialize array instead of object $scope.items = [....];

Upvotes: 2

Related Questions