What is the best way to apply a filter to an array of objects nested within another object in JavaScript?

Question

What is the best way to apply a filter to an array of objects nested within another object in JavaScript?

I encountered an issue with one of the API responses, The response I received is as follows:

[
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "US"}, {type: "County", countyName: "US"}, {type: "County", countyName: "US"}]},
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "German"}, {type: "County", countyName: "German"}, {type: "County", countyName: "German"}]},
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "Japan"}, {type: "County", countyName: "German"}, {type: "County", countyName: "German"}]},
]

This response consists of an array of objects, each containing country names in nested arrays. I am looking to extract all the county names into a single array, like this:

newNames = [US, German, Japan];

I attempted a solution but couldn't achieve the desired output. Can someone assist me with this? Thank you.

let newNames = this.selectedStateList.filter(item => item.countries.forEach(item => item.countries)).map(ele => ele.countries.forEach(item => item.countries))

javascript typescript ecmascript-6

Answer 1

Answer №1

To retrieve a list of unique countries, iterate through each `countries` object and store the data in a `Set`.

const data = [ {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "US"}, {type: "County", countyName: "US"}, {type: "County", countyName: "US"}]}, {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "German"}, {type: "County", countyName: "German"}, {type: "County", countyName: "German"}]}, {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "Japan"}, {type: "County", countyName: "German"}, {type: "County", countyName: "German"}]}, ],
      result = Array.from(data.reduce((r, {countries}) => {
        countries.forEach(({countyName}) => r.add(countyName));
        return r;
      }, new Set()));
console.log(result);

Answer 2

To retrieve a list of unique countries, iterate through each `countries` object and store the data in a `Set`.

const data = [ {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "US"}, {type: "County", countyName: "US"}, {type: "County", countyName: "US"}]}, {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "German"}, {type: "County", countyName: "German"}, {type: "County", countyName: "German"}]}, {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "Japan"}, {type: "County", countyName: "German"}, {type: "County", countyName: "German"}]}, ],
      result = Array.from(data.reduce((r, {countries}) => {
        countries.forEach(({countyName}) => r.add(countyName));
        return r;
      }, new Set()));
console.log(result);

Answer 3

Answer №2

Utilize .map functions instead of .forEach - .map

transforms each item in an array, whereas

forEach` does not provide any return value.

Once you have an array of arrays containing country names, you can use .flat() to merge them - alternatively, combine them and apply flatMap.

const data = [
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "US"}]},
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "German"}]},
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "Japan"}]},
];

const combinedData = data.flatMap(
  object => object.countries.map(
    country => country.countyName
  )
);
console.log(combinedData);

Answer 4

Utilize .map functions instead of .forEach - .map

transforms each item in an array, whereas

forEach` does not provide any return value.

Once you have an array of arrays containing country names, you can use .flat() to merge them - alternatively, combine them and apply flatMap.

const data = [
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "US"}]},
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "German"}]},
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "Japan"}]},
];

const combinedData = data.flatMap(
  object => object.countries.map(
    country => country.countyName
  )
);
console.log(combinedData);

Answer 5

Answer №3

Do you think something like this would be effective?

const arr = [
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "US"}]},
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "German"}]},
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "Japan"}]}
]

const result = arr.reduce((acc,val)=>{
    acc.push(val.countries[0].countyName)
    return acc
},[] )

console.log(result)

Answer 6

Do you think something like this would be effective?

const arr = [
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "US"}]},
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "German"}]},
  {type: "StateCountry", state: "AL", countries: [{type: "County", countyName: "Japan"}]}
]

const result = arr.reduce((acc,val)=>{
    acc.push(val.countries[0].countyName)
    return acc
},[] )

console.log(result)

Answer 7

Answer №4

To extract the first entry of the countries element within each object in the given response (an array of objects), you can iterate over it as follows:

var data = [
    { type: "StateCountry", state: "AL", countries: [{ type: "County", countyName: "US" }] },
    { type: "StateCountry", state: "AL", countries: [{ type: "County", countyName: "German" }] },
    { type: "StateCountry", state: "AL", countries: [{ type: "County", countyName: "Japan" }] },
]
let result = []

for (const item of data) {
    result.push(item.countries[0].countyName)
}
console.log(result)

Answer 8

To extract the first entry of the countries element within each object in the given response (an array of objects), you can iterate over it as follows:

var data = [
    { type: "StateCountry", state: "AL", countries: [{ type: "County", countyName: "US" }] },
    { type: "StateCountry", state: "AL", countries: [{ type: "County", countyName: "German" }] },
    { type: "StateCountry", state: "AL", countries: [{ type: "County", countyName: "Japan" }] },
]
let result = []

for (const item of data) {
    result.push(item.countries[0].countyName)
}
console.log(result)

What is the best way to apply a filter to an array of objects nested within another object in JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Leveraging Cheerio in Node.js to locate a precise value within an option tag

Adding icons to form fields based on the accuracy of the inputs provided

Requiring three parameters, yet received four

Displaying images with Javascript when they are clicked

Tips for handling CSS loading delays with icons in OpenLayers markers

Use jQuery's $.post method to validate the form field and prevent submission if there are any errors

Event fails to trigger when attached to different elements

The addClass() method seems to be malfunctioning following an ajax request

How to use Ionic 3 to automatically scroll ion-scroll content all the way to the bottom

What is the procedure for altering a particular element using ajax technology?

The response from Axios in NodeJs is displaying incorrect encoding

What is the solution for fixing the Typescript error in formik onSubmit?

Error: Unable to access the 'prototype' property of an undefined object (inherits_browser.js)

Use column formatting for the table's body section

The validation of DOM nesting has detected that a <td> element cannot be placed within an <a> element

Picture with predetermined size to occupy entire container

Ensuring a dependable detection of WebSocket connection status

Convert this JavaScript function into a jQuery function

The module rxjs/operators cannot be located

What is the best way to display a unique modal on every tab?