Using .map to loop array of objects and store new array in object value

Question

I'm currently getting data from a database of an array of objects. I need these objects to be reformatted to work with a UI package that we're using that requires these objects to look a specific way. The main array should look like this:

[{
   trim: 123,
   id: 123,
   children: [{
      trim: 123,
      id: 123,
   }],
}]

I'm successfully looping through the main array data and reformatting it into a new array using .map; however, I'm having issues doing the same thing but for the children key that's found in each object of the main array. Wondering if anyone could help me figure out the proper way to do this. I'll add my current code below and will be able to clarify more if needed.

if (this.$store.state.models.models) { // this is checking for the main array coming from the database
   const reformattedModels = this.$store.state.models.models.map((model) => {
   const tableModel = {
     trim: model.name,
     id: model.id,
     children: // Need to loop here to reformat array of objects that goes for the children key,
   };
   return tableModel;
 });
 return reformattedModels;

}

The array that I need to loop through for the children key is one of the keys found in the main array from the backend. It's called "trims" and looks like this:

[{
   name: 123,
   id: 123,
}]

It's another array of objects that comes in the backend data. That array is called "trims" each element in that array has a name key and an id key — albert_anthony6
– albert_anthony6, Commented Apr 28, 2021 at 10:41

Thomas · Accepted Answer · 2021-04-28 10:58:54Z

2

Create a reference to the function and call it recursively:

if (this.$store.state.models.models) {
  // store the function
  const mapper = model => ({
    trim: model.name,
    id: model.id,
    // use it for children, if there are any
    children: model.children?.map(mapper)
  });

  // use it for the models
  return this.$store.state.models.models.map(mapper);
}

I'm using optional chaining (?.) to call .map() only if model.children != undefined

edited Apr 28, 2021 at 10:58

answered Apr 28, 2021 at 10:44

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

albert_anthony6 Over a year ago

I'm not familiar with recursion, could you possibly give a little more detail? Or an example of what "mapper" would look like and also the loop for the children please?

Thomas Over a year ago

That is literally the entire code. I've moved the arrow function out from the .map(model => ...) and stored it in const mapper = model => ... and the "loop for the children" is here: children: model.children?.map(mapper) using optional chaining (?.) to call .map() only if model.children != undefined

albert_anthony6 Over a year ago

Ahh okay, I see now. The only thing is, what happens if in the future the children objects need keys that aren't found in the reference? How would the new keys be included then?

Thomas Over a year ago

Exactly like the current keys. It's up to you how you "compute" the value that you assign to a key, it doesn't have to come from the model.

albert_anthony6 Over a year ago

Okay, I tried it and it seems to work until it gets to the loop for the children; it says: "Error: for nested data item, row-key is required." Would you know the reason for this error? If not, I'll figure it out so no worries. It's probably a UI package specific thing

|

Collectives™ on Stack Overflow

Using .map to loop array of objects and store new array in object value

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related