Copy Array to Object in Object with Angular

Question

I'm learning Angular and I'm doing some example to understand angular.copy. What I want to do is create an Object with a Service, and then create a new Object which contains some element of the Service's Object.

Full code example: HERE

This is the "Data" Object of the Service:

return {
    name: "hello",
    toys: ["asd", "lol"],
    food: ["apple"],
    phones: ["samsung", "lg", "iphone"]
};

In the Controller I copy the Object, create a new one, and copy into it just some element of the old Object:

$scope.oldData = angular.copy(Data);
$scope.newData = {};

$scope.newData.name = oldData.name;

$scope.newData.toys = oldData.toys;

$scope.newData.phones = oldData.phones;

What I expect is that the user display just three elements: the name, the toys array and the phones array:

    <h1>{{newData.name}}</h1>

<h1>Toys:</h1>
<ul>
  <li ng-repeat="toy in newData.toys">{{ toy }}</li>
</ul>


<h1>Phones:</h1>
<ul>
  <li ng-repeat="phone in newData.phones">{{ phone }}</li>
</ul>

Why does it not work? What am I doing wrong?

Looking at the documentation, you need to specify the source and destination like this angular.copy(source, [destination]); So I would assume something like this angular.copy(Data, $scope.oldData); — Harry
– Harry, Commented Mar 14, 2016 at 9:16

Pankaj Parkar · Accepted Answer · 2016-03-14 09:19:42Z

2

oldData is scope variable, not normal javascript variable.

$scope.oldData

instead of

oldData

Code

$scope.oldData = angular.copy(Data);
$scope.newData = {};

$scope.newData.name = $scope.oldData.name;

$scope.newData.toys = $scope.oldData.toys;

$scope.newData.phones = $scope.oldData.phones;

Or either way you could make it var oldData

Demo

answered Mar 14, 2016 at 9:19

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Anand Gargate · Accepted Answer · 2016-03-14 09:20:31Z

2

You have not added $scope before using oldData. Check updated plunkr http://plnkr.co/edit/znoKheLX3aMVHpNo7lh4?p=preview

 $scope.oldData = angular.copy(Data);
 $scope.newData = {};

 $scope.newData.name = $scope.oldData.name;

 $scope.newData.toys = $scope.oldData.toys;

 $scope.newData.phones = $scope.oldData.phones;

answered Mar 14, 2016 at 9:20

Anand Gargate

4995 silver badges19 bronze badges

Comments

Vanojx1 · Accepted Answer · 2016-03-14 09:20:41Z

2

you re using oldData but you ve defined $scope.oldData

     var oldData = angular.copy(Data);
     $scope.newData = {};

     $scope.newData.Name = oldData.name;

     $scope.newData.toys = oldData.toys;

     $scope.newData.phones = oldData.phones;

here the fixed plunker

answered Mar 14, 2016 at 9:20

Vanojx1

5,5842 gold badges25 silver badges37 bronze badges

Comments

Eassa Nassar · Accepted Answer · 2016-03-14 09:22:25Z

1

you have to write the scope object $scope.newData.name = $scope.oldData.name; ...

answered Mar 14, 2016 at 9:22

Eassa Nassar

1,3001 gold badge16 silver badges19 bronze badges

Comments

e11438 · Accepted Answer · 2016-03-14 09:32:05Z

0

When I run your code the error i got was oldData is not defined. That is because you are using $scope.newData.Name = oldData.name; but javascript engine cannot find a variable oldData in this scope.

You have oldData attached to the $Scope. So you have to use $scope.newData.Name = $scope.oldData.name;

answered Mar 14, 2016 at 9:32

e11438

9043 gold badges20 silver badges33 bronze badges

Collectives™ on Stack Overflow

Copy Array to Object in Object with Angular

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related