Adding an object array to a new array - Step by step guide

Question

Adding an object array to a new array - Step by step guide

I am working with an array of states

const states = [{id:1,name:"New York",cities:[...]},{id:2,name:"California",cities:[...]}]

My goal is to extract all cities and store them in a new array using methods

...

const cities = []

this.states.forEach((state, index, array) => {
   this.cities = [...state.cities]
});

console.log(this.cities)
...

The issue I am facing is that only the last set of cities (California) is being retrieved. How can I resolve this problem?

javascript vue.js vuejs2

Answer 1

Answer №1

Consider utilizing the flatMap method as shown below.

this.cities = this.states.flatMap(s => s.cities);

Take a look at the example below.

const states = [{
  id: 1,
  name: "New York",
  cities: ['A', 'B']
}, {
  id: 2,
  name: "California",
  cities: ['C', 'D']
}];
let cities = states.flatMap(s => s.cities);
console.log(cities);

Alternatively, you can also use the approach mentioned in your question. The issue was that your cities object was being overwritten by each states.cities. To prevent this, modify your code as follows to include both current and new values of cities.

this.cities = [...this.cities, ...state.cities];

Note: Re-assigning the value as above will not work with const. Make sure to declare cities with let. Alternatively, you can use .push like

this.cities.push(...state.cities);

, which works with both const and let.

const states = [{
  id: 1,
  name: "New York",
  cities: ['A', 'B']
}, {
  id: 2,
  name: "California",
  cities: ['C', 'D']
}];

let cities = []
states.forEach((state, index, array) => {
  // Uncomment the following line if declaring cities as const causes issues
  //cities = [...cities, ...state.cities];
  
  // Use .push if working with const variables
  cities.push(...state.cities);
});
console.log(cities);

Answer 2

Consider utilizing the flatMap method as shown below.

this.cities = this.states.flatMap(s => s.cities);

Take a look at the example below.

const states = [{
  id: 1,
  name: "New York",
  cities: ['A', 'B']
}, {
  id: 2,
  name: "California",
  cities: ['C', 'D']
}];
let cities = states.flatMap(s => s.cities);
console.log(cities);

Alternatively, you can also use the approach mentioned in your question. The issue was that your cities object was being overwritten by each states.cities. To prevent this, modify your code as follows to include both current and new values of cities.

this.cities = [...this.cities, ...state.cities];

Note: Re-assigning the value as above will not work with const. Make sure to declare cities with let. Alternatively, you can use .push like

this.cities.push(...state.cities);

, which works with both const and let.

const states = [{
  id: 1,
  name: "New York",
  cities: ['A', 'B']
}, {
  id: 2,
  name: "California",
  cities: ['C', 'D']
}];

let cities = []
states.forEach((state, index, array) => {
  // Uncomment the following line if declaring cities as const causes issues
  //cities = [...cities, ...state.cities];
  
  // Use .push if working with const variables
  cities.push(...state.cities);
});
console.log(cities);

Answer 3

Answer №2

Make sure to avoid overriding previous values by using the push method within your forEach loop when assigning new cities.

this.cities.push(...state.cities)

Answer 4

Make sure to avoid overriding previous values by using the push method within your forEach loop when assigning new cities.

this.cities.push(...state.cities)

Adding an object array to a new array - Step by step guide

Answer №1

Answer №2

Similar questions

Is it possible in Vuetify 2 to align the items within the expansion of a v-data-table with the headers of the main component?

What is the best way to utilize MongoDB aggregate in this particular scenario?

Determine the upcoming Saturday's date by utilizing a stored procedure in Snowflake

Tips for updating a specific field within an object in an array within a mongoose schema and persisting the changes

Alter the DOM element every ten seconds

Serialization of forms consistently yields an empty string

What could be the reason behind ng-bind-html only displaying text and not the link?

Interactive game created using JavaScript input

Improving a Vue.js notification component with data retrieved from a fetch request result

Combining properties of JavaScript objects into one

The backend of Asp.net core 3.1 is unable to retrieve the Identity stored in the cookie

Why is TinyMCE removing my custom MPDF HTML elements?

Error: Unable to locate module during module creation

Accessing form data from Ajax/Jquery in php using $_POST variables

Vue project experiencing issues with font-awesome integration

What is the best way to transpile when using vue-cli-service to build a library?

Vue components not being highlighted within template section of Visual Studio Code

Improving React efficiency: What techniques can be used to prevent the entire component from re-rendering every time a prop changes?

Transforming conversion code snippet from jQuery to Dojo - utilizing AJAX techniques

React not displaying wrapped div