How merge two objects array in angularjs?

Question

I want to append following object array with existing one in angulajs for implementing load more feature.

ie,appending AJAX response with existing one each time.

I have one variable, $scope.actions which contains following JSON data,

    {
    "total": 13,
    "per_page": 2,
    "current_page": 1,
    "last_page": 7,
    "next_page_url": "http://invoice.local/activities/?page=2",
    "prev_page_url": null,
    "from": 1,
    "to": 2,
    "data": [
        {
            "id": 2108,
            "action_type_id": 202,
            "user_id": 1
        },
        {
            "id": 2108,
            "action_type_id": 202,
            "user_id": 1
        }
    ]
}

I want to append following JSON response each time this variable.

    {
    "data": [
        {
            "id": 2108,
            "action_type_id": 202,
            "user_id": 1
        },
        {
            "id": 2108,
            "action_type_id": 202,
            "user_id": 1
        }
    ]
}

I have tried with $scope.actions.data.concat(data.data);

but it is not working and getting following error message

$scope.actions.data.concat is not a function

Since new variable is exactly the same as data property in first sample, some clarification would help — charlietfl
– charlietfl, Commented Apr 29, 2015 at 15:51

Deblaton Jean-Philippe · Accepted Answer · 2015-04-29 16:17:52Z

40

You can use angular.extend(dest, src1, src2,...);

In your case it would be :

angular.extend($scope.actions.data, data);

See documentation here :

https://docs.angularjs.org/api/ng/function/angular.extend

Otherwise, if you only get new values from the server, you can do the following

for (var i=0; i<data.length; i++){
    $scope.actions.data.push(data[i]);
}

edited Apr 29, 2015 at 16:17

answered Apr 29, 2015 at 15:53

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

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

6 Comments

Deblaton Jean-Philippe Over a year ago

can't you give more info?

Muhammed Shihab Over a year ago

`angular.extend($scope.actions, data); it is replacing not appending :(

Muhammed Shihab Over a year ago

When trying second method,getting error Error: $scope.actions.data.push is not a function

MuntingInsekto Over a year ago

I think you should try to do this angular.extend({}, $scope.actions.data, data); . docs.angularjs.org/api/ng/function/angular.extend. This helps me a lot and this also works for me.

Mark Over a year ago

angular.extend() is a shallow copy and will fail in the general case (arrays of arbitrarily complex objects). angular.merge() implements a deep copy, but also failed during cursory testing... I opted for the direct solution: src.forEach(function (x) { dst.push(x); }); to merge src into dst.

|

mbejda · Accepted Answer · 2015-12-05 07:59:58Z

29

This works for me :

$scope.array1 = $scope.array1.concat(array2)

In your case it would be :

$scope.actions.data = $scope.actions.data.concat(data)

answered Dec 5, 2015 at 7:59

mbejda

1,47117 silver badges25 bronze badges

2 Comments

benjaminhull Over a year ago

@davidH This is only the correct answer if you want to just plonk two arrays together. Ideal if the keys of the array are just an arbitrary index number. However, for the actual example in the question, each item is being returned with a specific ID, so merge or extend are better here to avoid duplicates in the resulting array.

rahim.nagori Over a year ago

This is not working for me. I'm using $scope.actions.data in an ng-repeat, the value in console is updating but not in the view file.

shah · Accepted Answer · 2016-05-13 20:49:44Z

4

$scope.actions.data.concat is not a function

same problem with me but i solve the problem by

 $scope.actions.data = [].concat($scope.actions.data , data)

edited May 13, 2016 at 20:49

answered May 5, 2016 at 22:56

shah

1,1692 gold badges20 silver badges42 bronze badges

Comments

Nishchit · Accepted Answer · 2016-09-14 09:44:46Z

2

Simple

var a=[{a:4}], b=[{b:5}]

angular.merge(a,b) // [{a:4, b:5}]

Tested on angular 1.4.1

answered Sep 14, 2016 at 9:44

Nishchit

19.2k12 gold badges58 silver badges81 bronze badges

1 Comment

serge Over a year ago

Unlike extend(), merge() recursively descends into object properties of source objects, performing a deep copy.

Collectives™ on Stack Overflow

How merge two objects array in angularjs?

4 Answers 4

6 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related