iterate the json array and push each value to the list in angular js

Question

I am very new to angular JS.My question is, I have a json array that I am getting as ajax response from php page. I am iterating that json array and I want to push each value in the list like

angular.forEach($scope.companies.area, function(value, key) {
      $scope.comp = [
         { 'name': value1 },
         { 'name': value2 },
         { 'name': value3 }
      //...
      ]
});

How can I make this list? My Json data is

{"1":"Audugodi","2":"Airforce Station Yelahanka","3":"Agaram","4":"Anadanagar","5":"Arabic College","6" :"Banasawadi","7":"Banashankari","8":"Banashankari II Stage","9":"Banashankari III Stage","10":"Bangalore city","11":"Bangalore GPO","12":"Bannerghatta","13":"Bannerghatta Road","14":"Basavanagudi","15":"Basaveswaranagar" }

Ori Drori · Accepted Answer · 2015-08-16 17:51:51Z

4

It can be easier using a simple Array.prototype.map:

  $scope.comp = $scope.companies.area.map(function(value) {
      return { name: value };
  });

As your data is actually in an object format, will have to change a bit to use it with .map (the original JSON data is at the bottom for reference):

helloApp.controller("CompanyCtrl", function ($scope, $http) {
    $http.post('class_locaality.php?flag=1').success(function (data) {
        $scope.companies = data; // the original data - we need data.area
        $scope.comp = Object.keys(data.area).map(function (key) { // turn the object into a array of keys that we can iterate
                return {
                    name : data.area[key] // get the value from the original data.area using the key
                };
            });
    }).error(function (data) { // log error }); });


{
    "1" : "Audugodi",
    "2" : "Airforce Station Yelahanka",
    "3" : "Agaram",
    "4" : "Anadanagar",
    "5" : "Arabic College",
    "6" : "Banasawadi",
    "7" : "Banashankari",
    "8" : "Banashankari II Stage",
    "9" : "Banashankari III Stage",
    "10" : "Bangalore city",
    "80" : "St.Thomas Town",
    "81" : "Subramanyanagar",
    "95" : "Yelahanka",
    "96" : "Yeshwanthpur"
}

edited Aug 16, 2015 at 17:51

answered Aug 16, 2015 at 17:24

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

9 Comments

pdenes Over a year ago

Indeed, this is much cleaner than forEach + push!

rohit jaiswal Over a year ago

Its not working here. My code is var helloApp = angular.module("helloApp", []); helloApp.controller("CompanyCtrl", function($scope, $http) { $http.post('class_locaality.php?flag=1'). success(function(data) { $scope.companies = data; $scope.comp = $scope.companies.area.map(function(value) { return { name: value }; }); }). error(function(data) { // log error }); });

Ori Drori Over a year ago

Can you post the JSON you get in the AJAX response ? (edit your original questions, and add it)

rohit jaiswal Over a year ago

{ "1": "Audugodi", "2": "Airforce Station Yelahanka", "3": "Agaram", "4": "Anadanagar", "5": "Arabic College", "6": "Banasawadi", "7": "Banashankari", "8": "Banashankari II Stage", "9": "Banashankari III Stage", "10": "Bangalore city", "80": "St.Thomas Town", "81": "Subramanyanagar", "95": "Yelahanka", "96": "Yeshwanthpur" }

TheKingPinMirza Over a year ago

When you say it isnt working than what error you see in console?

|

pdenes · Accepted Answer · 2015-08-16 17:23:29Z

1

This isn't very specific to Angular. You can do exactly as you say: push the values into the array:

$scope.comp = [];
$scope.companies.area.forEach(function(value) {
    $scope.comp.push({ name: value });
});

answered Aug 16, 2015 at 17:23

pdenes

8427 silver badges11 bronze badges

Comments

TheKingPinMirza · Accepted Answer · 2015-08-16 17:52:40Z

An example copied from here without using .Map

var colors = [
    {r: 255, g: 255, b: 255 }, // White
    {r: 128, g: 128, b: 128 }, // Gray
    {r: 0,   g: 0,   b: 0   }  // Black
];

var newColors = [];

for (var i = 0; i < colors.length; i++) {
    transformed = {
        r: Math.round( colors[i].r / 2 ),
        g: Math.round( colors[i].g / 2 ),
        b: Math.round( colors[i].b / 2 )
    };

    newColors.push(transformed);
}

// Outputs:
// [
//    {r: 128, g: 128, b: 128 },
//    {r: 64,  g: 64,  b: 64  },
//    {r: 0,   g: 0,   b: 0   }
// ];
console.log(newColors);

Using .map

var newColors = colors.map(function(val) {
    return {
        r: Math.round( val.r / 2 ),
        g: Math.round( val.g / 2 ),
        b: Math.round( val.b / 2 )
    };
});

For explanation read this excellent article

Collectives™ on Stack Overflow

iterate the json array and push each value to the list in angular js

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related