Getting the Value of an Object in an Array in My Angular Project

Question

Getting the Value of an Object in an Array in My Angular Project

Within my Angular Application, I am receiving an array of objects from an API:

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

I want to specifically display the value for 'England' in the console which is located in the third object. I attempted looping through the array like this:

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

The 'undefined' values seem to be generated by the first two objects.

Is there a way to iterate through only the third object and retrieve the figure for 'England' without having the initial 'undefined' values appear?

Note:

'Data' originates from the API I have connected to in the .ts file, containing all the information gathered from the API call.

javascript arrays angular typescript

Answer 1

Answer №1

To filter out all objects without an 'England' key and then map the array of objects, you can use .filter() and .map():

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)
                 .map(obj => obj.England)

console.log(country) // Output: [2]

If 'England' will never have a value of 0, you can use .filter() with Boolean() after mapping:

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: If you want to extract the number values of each property into an array using .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)
                 .flatMap(Object.values)

console.log(country) // Output: [5, 1, 2, 2]

Alternatively, with lodash for better browser compatibility:

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

To filter out all objects without an 'England' key and then map the array of objects, you can use .filter() and .map():

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)
                 .map(obj => obj.England)

console.log(country) // Output: [2]

If 'England' will never have a value of 0, you can use .filter() with Boolean() after mapping:

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: If you want to extract the number values of each property into an array using .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)
                 .flatMap(Object.values)

console.log(country) // Output: [5, 1, 2, 2]

Alternatively, with lodash for better browser compatibility:

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 3

Answer №2

One option is to utilize the _.compact(array) function provided by Lodash. This function effectively eliminates all falsy values such as false, null, 0, "", undefined, and NaN from the array.

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

Answer 4

One option is to utilize the _.compact(array) function provided by Lodash. This function effectively eliminates all falsy values such as false, null, 0, "", undefined, and NaN from the array.

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

Answer 5

Answer №3

The purpose of using a map function is quite different from what you are attempting to achieve. When using map, it iterates over your collections and produces a new result for each item within the collections. If it cannot find data for the first two objects, it will return Undefined. In this case, you have three objects in total, but an array of three with the first two being undefined. Map should be used when you want to process collections and create a new collection with the desired results.

If you are looking for specific items, you can use the find method instead:

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

Answer 6

The purpose of using a map function is quite different from what you are attempting to achieve. When using map, it iterates over your collections and produces a new result for each item within the collections. If it cannot find data for the first two objects, it will return Undefined. In this case, you have three objects in total, but an array of three with the first two being undefined. Map should be used when you want to process collections and create a new collection with the desired results.

If you are looking for specific items, you can use the find method instead:

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

Getting the Value of an Object in an Array in My Angular Project

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to trigger a Python script from a webpage using a function?

No values are being assigned to the array elements in the Node.js application

I'm struggling to comprehend the purpose of this function. [From the Codecademy Contact List exercise]

Looking to conduct date comparisons within angular-ui-grid?

Arranging an array of personalized objects based on date in Swift

A guide on accessing the first element in an array when performing multiplication within the Interval component in React.js

What is the best way to add randomness to the background colors of mapped elements?

Having trouble passing parameters to the Mongo find collection operation

Utilizing setInterval in Vue 3 to efficiently eliminate elements from an array

Detecting collisions between multiple moving objects in Three.js

JavaScript file encountering a problem with its global variables

Combining the devexpress dxDataGrid with Angular's $scope for seamless web development

Why is it important to understand the role of ngOnInit() in Angular?

Utilizing AJAX for XML data parsing

Tips for guaranteeing blocking within a loop in Node.JS

How can you determine if a specific variable exists within an array using an if statement?

When the component is reloaded, props will become defined

How to pass the ng-repeat $index value as a parameter in AngularJS

What causes the event parameter to be lost during recursion?

JavaScript: utilizing 'this' and onClick events