如何在我的 Angular 应用程序中的数组中从 Object 中获取价值

Question

So I have this array of object coming from an API in my Angular Application

"register":[
{
"club": 8,
"players": 100,
"officials": 10
},
{
"male": 7,
"female": 2,
"other": 1
},
{
"Brazil": 5,
"France": 1,
"Italy": 2,
"England": 2
}
]

My aim is to display an item in the third object on the console. So I tried looping through the array of object this way:

 let country =  data['register'].map(data => data.England)
  console.log(country) // Output: [undefined, undefined, 2]

I guess the undefined are coming from the first two objects.

How do I loop through this object to get only the figure for England in the third Object, without the first two undefined showing?

Note :

data is coming from the API I subscribed to in the .ts file. It contains all the results from the API.

Answer 1

You can .filter() out all objects which don't have a England key (and keep all those which do) and then .map() your array of objects like so:

 const data = {register:[{club:8,players:100,officials:10},{male:7,female:2,other:1},{Brazil:5,France:1,Italy:2,England:2}]}; let country = data.register.filter(obj => 'England' in obj) // keep all objects in your array with the England property.map(obj => obj.England) // map to the england property console.log(country) // Output: [2]

If England can never have a value of 0 , you can .filter() after mapping by using Boolean() like so:

 const data = {register:[{club:8,players:100,officials:10},{male:7,female:2,other:1},{Brazil:5,France:1,Italy:2,England:2}]}; const country = data.register.map(({England}) => England).filter(Boolean); console.log(country) // Output: [2]

---

EDIT: As per your question in the comments, if you wish to get the number value of each property into an array, you can use .flatMap with Object.values() :

 const data = {register:[{club:8,players:100,officials:10},{male:7,female:2,other:1},{Brazil:5,France:1,Italy:2,England:2}]}; let country = data.register.filter(obj => 'England' in obj) // keep all objects in your array with the England property.flatMap(Object.values) // flatMap the array returned by Object.values console.log(country) // Output: [5, 1, 2, 2]

Or with lodash (more browser compatible):

 const data = {register:[{club:8,players:100,officials:10},{male:7,female:2,other:1},{Brazil:5,France:1,Italy:2,England:2}]}; const englandObjects = _.filter(data.register, obj => 'England' in obj) const numberVals = _.flatMap(englandObjects, Object.values); console.log(numberVals);

 <script src="https://cdn.jsdelivr.net/lodash/4.16.4/lodash.min.js"></script>

Answer 2

you can use _.compact(array) built-in function from Lodash which removes all the falsy values like false, null, 0, "", undefined and NaN.

let country = _.compact(data['register'].map(data => data.England));
console.log(country) // Output: [2]

Answer 3

Use case of map is totally different than what you are trying to achieve. Map iterates over your collections and for each item under collections, produce new result and will be returned that. So for first two object it not finding so Undefined . You have 3 object, you got array of 3 with first two being undefined Use map when you want to process collections and wants new collection with your desired result.

Here you can use find:

const foundItem = data.register.find(item => item.England)
console.log(foundItem.England); // you can access all attributes here
console.log( [foundItem.England] ); // as array