current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 3 down vote favorite
1

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" }

share|improve this question
up vote 5 down vote accepted

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"
}
share|improve this answer
    
Indeed, this is much cleaner than forEach + push! – pdenes Aug 16 '15 at 17:28
    
@pdenes is right :-p – Ori Drori Aug 16 '15 at 17:31
    
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 }); }); – rohit jaiswal Aug 16 '15 at 17:32
    
Can you post the JSON you get in the AJAX response ? (edit your original questions, and add it) – Ori Drori Aug 16 '15 at 17:33
    
{ "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" } – rohit jaiswal Aug 16 '15 at 17:46
up vote 2 down vote

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 });
});
share|improve this answer
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.