adding properties to an existing object inside an array

Question

I am picking an array with few object on it from an external file.

Using:

app.controller('mycontroller',  function($scope, $http) { 
$http.get("file")
.then(function(response) {
    $scope.lols = response.data;     
});});

This will give me back something like:

 $scope.lols = [
{
    prop1: "h1",
    prop2: "h2",
},
{
    prop1: "g1",
    prop2: "g2",
},}

Now I want to add a prop3 in each of the objects how should I do it ? If I had the data into my js file I will do it manually but picking the data from an external file...

I have tried simply doing:

app.controller('mycontroller',  function($scope, $http) { 
$http.get("file")
.then(function(response) {
    $scope.lols = response.data;
    $scope.lols.push = [
    {prop3: "h3"},
    {prop3: "g3"}
    ]
});});

But it has not worked...

Thanks for any help or link explain it.

SOLUTION: https://jsfiddle.net/d3c96e0z/3/

can u be more clear on to which array has to modified ? . games array or lols arrays . :) — Shushanth Pallegar
– Shushanth Pallegar, Commented Sep 22, 2016 at 12:17
Please find here what I am trying to achieve jsfiddle.net/d3c96e0z — noway
– noway, Commented Sep 22, 2016 at 13:25

Harkirat Saluja · Accepted Answer · 2016-09-22 12:23:25Z

1

I think this should help you:-

var lols = [
{
    prop1: "h1",
    prop2: "h2",
},
{
    prop1: "g1",
    prop2: "g2",
}
]

Object.keys(lols).map(function(key,index){
        var lol = lols[key]
      lol["props3"]="g3"
      console.log(lol)
})

JS fiddle link https://jsfiddle.net/bps7zzf8/

answered Sep 22, 2016 at 12:23

Harkirat Saluja

8,1145 gold badges53 silver badges74 bronze badges

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

1 Comment

noway Over a year ago

Please find here what I am trying to achieve jsfiddle.net/d3c96e0z

Michael Troger · Accepted Answer · 2016-09-22 13:29:46Z

0

You want prop3 to be a sibling of prop1 and prop2? If so you can do it either hard-coded like:

$scope.lols[0].prop3 = "h3";
$scope.lols[1].prop3 = "g3";

Or in a more dynamic way:

var newProps = ["h3", "g3"];
for (var i = 0; i < $scope.lols.length; i++) {
  $scope.lols[i].prop3 = newProps[i]; // assuming the length of both arrays is the same size;
}

The problem with your approach: With push you're creating a new index in the array instead of adding your properties to existing indexes.

edited Sep 22, 2016 at 13:29

answered Sep 22, 2016 at 12:20

Michael Troger

3,5272 gold badges28 silver badges46 bronze badges

8 Comments

noway Over a year ago

each object has a diferent prop3 value

Michael Troger Over a year ago

and from where do you get those values? Then I can tell you how to add them dynamically. What's the data structure of the source?

Michael Troger Over a year ago

I updated my answer with a dynamic solution assuming your source is an array with the same length.

noway Over a year ago

Michael , thanks for your help, this is a more clear example of what I am trying to achieve link

Michael Troger Over a year ago

that means you know the length of the array you receive and you can create a new array with the same length, right? So you can use the dynamic example above just change the content of newProps like: var newProps = ["megaman", "jesus!"]; and put the code after $scope.lols = response.data; of course.

|

Devidas Kadam · Accepted Answer · 2016-09-22 12:24:23Z

0

try like, Here is working example $scope.lols.push({prop1: "h3",prop2: "g3"});

edited Sep 22, 2016 at 12:24

answered Sep 22, 2016 at 12:19

Devidas Kadam

9549 silver badges19 bronze badges

1 Comment

noway Over a year ago

With that you add a new object to the array but i want to keep the same object I have extracted from the external files and just add 1 more property yo each one

Hmahwish · Accepted Answer · 2016-09-22 12:28:25Z

0

Keep the properties to be added in a array of objects and then loop over the $scope.lols and add each property according to the index;

$scope.propertyJson=[{prop3: "h3"},{prop3: "g3"}];
for (var i = 0; i < $scope.lols.length; i++) {
 angular.forEach($scope.propertyJson[i], function(value, key) {
  $scope.lols[i][key] = value;
 });
}

answered Sep 22, 2016 at 12:28

Hmahwish

2,2328 gold badges27 silver badges45 bronze badges

Comments

Shaishab Roy · Accepted Answer · 2016-09-22 16:25:09Z

0

if you want to add prop3 in each object can try this process:

// assume that you know "lols" length. here let 2 so add 2 values for prop3

$scope.prop3Values = ["yellow", "red"];

$scope.lols = $scope.lols.map(function(e,index) {
    e.prop3 = $scope.prop3Values[index]; // assign your value in prop3
    return e;
  });

then your lols will be look like

$scope.lols = [
{
    prop1: "h1",
    prop2: "h2",
    prop3: "yellow"
},
{
    prop1: "g1",
    prop2: "g2",
    prop3: "red"
}]

edited Sep 22, 2016 at 16:25

answered Sep 22, 2016 at 12:26

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

3 Comments

noway Over a year ago

If the value of the prop3 need to be for example "yellow" in the first object and "red" in the next object how would it be?

noway Over a year ago

Please find here what I am trying to achieve jsfiddle.net/d3c96e0z

Shaishab Roy Over a year ago

if you know length of lols array and what value need to add for prop3 then add all values in an array and assign it by using index. see my update answer @noway

Collectives™ on Stack Overflow

adding properties to an existing object inside an array

5 Answers 5

1 Comment

8 Comments

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

8 Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related