Doubt angularjs with array

Question

Doubt angularjs with array

Navigation

#1 by (4 votes)
#2 by (2 votes)

3

How do I get only the id and key ?

{
  "type": "champion",
  "version": "6.3.1",
  "data": {
    "1": {
      "id": 1,
      "key": "Annie",
      "name": "Annie",
      "title": "a Criança Sombria",
      "info": {
        "attack": 2,
        "defense": 3,
        "magic": 10,
        "difficulty": 6
      }
    },
    "2": {
      "id": 2,
      "key": "Olaf",
      "name": "Olaf",
      "title": "o Berserker",
      "info": {
        "attack": 9,
        "defense": 5,
        "magic": 3,
        "difficulty": 3
      }
    },
    "3": {
      "id": 3,
      "key": "Galio",
      "name": "Galio",
      "title": "o Sentinela da Amargura",
      "info": {
        "attack": 3,
        "defense": 7,
        "magic": 6,
        "difficulty": 3
      }
    }
  }

The array is in the variable content , using {{content.data[1]}} to get this:

 {
   "id": 1,
   "key": "Annie",
   "name": "Annie",
   "title": "a Criança Sombria",
   "info": {
     "attack": 2,
     "defense": 3,
     "magic": 10,
     "difficulty": 6
   }
 }

But I would like to capture only id and key . How can I do this?

javascript angularjs json

asked by anonymous 16.02.2016 / 18:38

2 answers

2

You can iterate over the list and transform the information to the pattern you want.

For example, the following code returns the following array:

[{"id":"1","key":"Annie"},{"id":"2","key":"Olaf"},{"id":"3","key":"Galio"}]

var app = angular.module('sampleApp', []);

app.controller('SampleController', function ($scope) {

  $scope.fonte = {
    "type": "champion",
    "version": "6.3.1",
    "data": {
      "1": {
        "id": 1,
        "key": "Annie",
        "name": "Annie",
        "title": "a Criança Sombria",
        "info": {
          "attack": 2,
          "defense": 3,
          "magic": 10,
          "difficulty": 6
        }
      },
      "2": {
        "id": 2,
        "key": "Olaf",
        "name": "Olaf",
        "title": "o Berserker",
        "info": {
          "attack": 9,
          "defense": 5,
          "magic": 3,
          "difficulty": 3
        }
      },
      "3": {
        "id": 3,
        "key": "Galio",
        "name": "Galio",
        "title": "o Sentinela da Amargura",
        "info": {
          "attack": 3,
          "defense": 7,
          "magic": 6,
          "difficulty": 3
        }
      }
    }
  }

  $scope.forEachMap = [];
  
  angular.forEach($scope.fonte.data, function(value, key) {
  $scope.forEachMap.push({id: key, key: value.key});
  });
  
});

<html ng-app='sampleApp'>
  
  
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script></head><body><divng-controller="SampleController">

      
     
      {{forEachMap}}


    </div>
  </body>
</html>

16.02.2016 / 19:42

Code works sometimes yes and sometimes not How do I avoid resetting screen elements when turning the phone?

score 4 · Accepted Answer

If it is to be used only in HTML, just do an ng-repeat like this:

angular.module('App', [])
    .controller('MyCtrl', [
            '$scope',
            function(
                $scope
            ) {
                $scope.content = {
                    "type": "champion",
                    "version": "6.3.1",
                    "data": {
                        "1": {
                            "id": 1,
                            "key": "Annie",
                            "name": "Annie",
                            "title": "a Criança Sombria",
                            "info": {
                                "attack": 2,
                                "defense": 3,
                                "magic": 10,
                                "difficulty": 6
                            }
                        },
                        "2": {
                            "id": 2,
                            "key": "Olaf",
                            "name": "Olaf",
                            "title": "o Berserker",
                            "info": {
                                "attack": 9,
                                "defense": 5,
                                "magic": 3,
                                "difficulty": 3
                            }
                        },
                        "3": {
                            "id": 3,
                            "key": "Galio",
                            "name": "Galio",
                            "title": "o Sentinela da Amargura",
                            "info": {
                                "attack": 3,
                                "defense": 7,
                                "magic": 6,
                                "difficulty": 3
                            }
                        }
                    }
                }              
                }
            ])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="App" ng-controller="MyCtrl">
    <ul ng-repeat="item in content.data">
    <li>{{item.id}} -- {{item.key}}</li>
    </ul>
</div>

If you need to use the controller directly, just use forEach:

  angular.forEach($scope.content.data, function(item){
      console.log(item.id +" - "+item.key);
  })