Doubt Angularjs with array

Asked

Viewed 139 times

3

How do I catch just 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]}} get that:

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

But I’d like to capture only id and key. How can I do that?

javascript angularjs json
  • 1

    content.data.id ?

  • I tried but n worked, putting content.data[1]. id works, but no qria do 1 by 1, have to use a "for" to solve this?

  • I’m putting together a solution.

  • https://jsfiddle.net/w0cL5vy9/

  • @Brunobrito You will work with these values in HTML or Controller?

  • For now in HTML

Show 1 more comment

2 answers

4


If you use 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>
<div ng-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 directly in the Controller just use foreach:

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

2

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

For example, the code below 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>
    <div ng-controller="SampleController">

      
     
      {{forEachMap}}


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

Browser other questions tagged javascript angularjs json

You are not signed in. Login or sign up in order to post.