How to add Angular forEach every item in a single array

Question

Here i like to explain my problem clearly.

$http.get('arealist.json').success(function(response){
      angular.forEach(response, function(data){
           $scope.arealist = data.area_name;
           console.log($scope.arealist);
      });
});

Using the above code am getting area_name from arealist.json. and it looks like below image in console.

but i need the store above data in a array and it look like below

$scope.arealist = [ 
                    "Avadi", 
                    "Poonamallee",
                    "Padi", 
                    "Ambattur Industrial Estat",
                    "Annanagar",
                    "Arumbakkam",
                    "Kodambakkam",
                    "Nandanam"
                  ]

How can i do this ?

Thangadurai · Accepted Answer · 2016-01-18 07:47:56Z

4

Declare a variable like below.

var arealistArray=[];
$scope.arealist=[];

Then push a value into array.

angular.forEach(response, function(data){
       arealistArray.push(data.area_name);
  });

Finally Assign the array to scope variable.

$scope.arealist=arealistArray;

answered Jan 18, 2016 at 7:47

Thangadurai

5441 gold badge9 silver badges21 bronze badges

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

Comments

Tarun Dugar · Accepted Answer · 2016-01-18 07:40:16Z

1

Use an array:

$scope.arealist = [];
$http.get('arealist.json').success(function(response){
      angular.forEach(response, function(data){
           $scope.arealist.push(data.area_name);
           console.log($scope.arealist);
      });
});

answered Jan 18, 2016 at 7:40

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

3 Comments

Nodemon Over a year ago

getting error as Cannot read property 'push' of undefined

Tarun Dugar Over a year ago

Have you declared $scope.arealist = [] ? See the first statement in the code snippet.

Tarun Dugar Over a year ago

I dont think this is possible. Can you recreate the issue in a plunker/fiddle?

sdgluck · Accepted Answer · 2016-01-18 10:48:24Z

1

It looks like you are performing this request within a controller (as $scope is available)? So first of all, you should be doing requests like this within a service. For example:

angular
    .module(/*module name*/)
    .service('AreaService', function ($http) {

        // Map the array of area objects to an array
        // of each area object's `area_name` property
        this.getAreas = function () {
            return $http
                .get('arealist.json')
                .then(function (response) {
                    return response.data.map(function (data) {
                        return data.area_name;
                    });
                });
        };
    })

And then consume the service within your controller:

    .controller(/*controller name*/, function (AreaService) {
        AreaService.getAreas().then(function (areas) {
            $scope.arealist = areas;
        }); 
    });

edited Jan 18, 2016 at 10:48

answered Jan 18, 2016 at 10:17

sdgluck

27.8k12 gold badges82 silver badges96 bronze badges

2 Comments

Prashant Over a year ago

Approach is good, but mistakes in code. AreaService::getAreas should not use success handler but use then handler where the response data is transformed and returned. In the controller code, service API should be consumed as a then callback instead of passing the function as argument since that is never invoked.

sdgluck Over a year ago

@PrashantPalikhe Thanks! That'll teach me for trying to answer questions on a hangover. :-)

Prashant · Accepted Answer · 2016-01-18 10:15:24Z

0

You can use Array.prototype.map() to achieve this.

$scope.arealist = [];

$http.get('arealist.json').success(function (response) {
    $scope.arealist = response.map(function (data) {
        return data.area_name;
    });
});

Browser support for map.

If you are using libraries like underscore.js or lodash, use _.map() for the same result.

$scope.arealist = [];

$http.get('arealist.json').success(function (response) {
    $scope.arealist = _.map(response, function (data) {
        return data.area_name;
    });
});

edited Jan 18, 2016 at 10:15

answered Jan 18, 2016 at 10:09

Prashant

8,1503 gold badges27 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to add Angular forEach every item in a single array

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related