Currently, I am delving into the world of Angular and have come across an example code snippet that looks like this:
$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',
}];
Although this setup is functional, my goal is to retrieve data from an API and then dynamically populate the $scope.contents. In my attempt to achieve this, here is what I have tried:
$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) });
This approach does work as I can iterate through the fetched data objects from the API. However, I am struggling with the syntax to incorporate the returned data into $scope.contents. Can you guide me on the proper method to accomplish this task? Could there be a more efficient way to handle this, such as transforming $scope.contents into a class structure and appending the data as a new instance?