How can I dynamically add values to a javascript object

Question

I am trying to learn angular, and I have an example code snippet that is the following:

$scope.contents = [{
    name: 'Chris Doe',
    abbreviation: 'Developer',
},{
    name: 'Ann Doe',
    abbreviation: 'Commerce',
},{
    name: 'Mark Ronson',
    abbreviation: 'Designer',
},{
    name: 'Eric Doe',
    abbreviation: 'Human Resources',
},{
    name: 'John Doe',
    abbreviation: 'Commerce',
},{
    name: 'George Doe',
    abbreviation: 'Media',
},{
    name: 'Ann Ronson',
    abbreviation: 'Commerce',
},{
    name: 'Adam Ronson',
    abbreviation: 'Developer',
},{
    name: 'Hansel Doe',
    abbreviation: 'Social Media',
},{
    name: 'Tony Doe',
    abbreviation: 'CEO',
}];

Which works fine, but I want to fetch data from an API and then load the data into the $scope.contents. I have tried the following:

$http(req).success(function(res) {
    console.log(res);
    for (var i = 0; i < res.length; i++) {
        console.log(res[i]);
        //add data into scope contents here .add(res[i])
    }
}).error(function (err) { console.log(err) });

and this works, I am able to loop through the object of data returned from my API, however I cannot figure out the syntax to add the returned data into $scope.contents What is the proper way to do this? Is there a better way to do this? Like making $scope.contents a class and adding the data as a new instance?

Can you share the format of the response data. An example of what console.log(res[I]); outputs would be great. — JRulle
– JRulle, Commented Jul 23, 2015 at 16:29
@JRulle Object { id: 2, name: "Germany", abbreviation: "DE" } — user4612487
– user4612487, Commented Jul 23, 2015 at 17:13
Given that format, you can use @andrewR's answer below to achieve what you want. — JRulle
– JRulle, Commented Jul 23, 2015 at 17:15

robertklep · Accepted Answer · 2015-07-23 16:12:56Z

5

You can use Array#concat:

$scope.contents = $scope.contents.concat(res);

Obviously you first want to make sure that $scope.contents is already an array:

if (! Array.isArray($scope.contents)) {
  $scope.contents = [];
}
$scope.contents = $scope.contents.concat(res);

answered Jul 23, 2015 at 16:12

robertklep

205k38 gold badges421 silver badges412 bronze badges

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

1 Comment

user4612487 Over a year ago

Well hell, that was really easy.

AndrewR · Accepted Answer · 2015-07-23 16:15:49Z

2

$scope.contents is an array, so you can push a new object to it.

$http(req).success(function(res) {
    console.log(res);
    for (var i = 0; i < res.length; i++) {
        console.log(res[i]);
        $scope.contents.push(res[i]);
    }
}).error(function (err) { console.log(err) });

It's not obvious from your example what res[i] contains. The above code is assuming that it is already the correct object. If not, take this and place the correct values.

$scope.contents.push({
    name: res[i].name,
    abbreviation: res[i].abbreviation,
}); // example -- change to match your data

answered Jul 23, 2015 at 16:15

AndrewR

6,7681 gold badge26 silver badges38 bronze badges

Comments

WhiteHat · Accepted Answer · 2015-07-23 16:13:30Z

1

$scope.contents looks like an array so...

$scope.contents.push(res[i]);

answered Jul 23, 2015 at 16:13

WhiteHat

61.3k7 gold badges54 silver badges140 bronze badges

Collectives™ on Stack Overflow

How can I dynamically add values to a javascript object

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related