How does one map just once all items of several of an object's direct child-arrays?

Question

I create an array of array of object and I would like to find out a way to map into it. This is the array I have and want to map into just to return the name and the description:

const frenchList = {
  u: [{
    id: 1,
    rating: 5,
    name: 'Uranophobie',
    description: 'Peur des cieux.',
  }, {
    id: 2,
    rating: 5,
    name: 'Urinophobie',
  }],
  v: [{
    id: 3,
    rating: 5,
    name: 'Vermiphobie',
    description: 'Peur des vers.',
  }],
};

[How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Andreas, Aug 27 '21 at 17:37
Does this answer your question? [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — SuperStormer, Aug 27 '21 at 17:45
The OP actually presents an object with properties with each property having assigned a sole array of object items **and not ...** _**"... an array of array of object ..."**_ — Peter Seliger, Aug 27 '21 at 17:49
Sorry for the title mistake. just update it as @Andreas did mention. Thanks guys! — fyardlest, Aug 27 '21 at 17:56

Peter Seliger · Answer 1 · 2021-08-29T07:46:23.780

The OP actually presents an object with properties with each property having assigned as its value an array of object items and not ... "... an array of array of object ...".

Being aware of the structure one could choose an approach like the following one which flattens all of the processed object's values and finally does map each sub-structure item by a new object which just features the latter item's name and description ...

const frenchList = {
  u: [{
    id: 1,
    rating: 5,
    name: 'Uranophobie',
    description: 'Peur des cieux.',
  }, {
    id: 2,
    rating: 5,
    name: 'Urinophobie',
  }],
  v: [{
    id: 3,
    rating: 5,
    name: 'Vermiphobie',
    description: 'Peur des vers.',
  }],
};

console.log(
  'flattened values mapped as key value specific items ...',
  Object
    .values(frenchList)
    .flat()
    .map(({ name, description = '' }) => ({ name, description }))
  //.map(({ name, description = null }) => ({ name, description }))
);
console.log(
  'flattened values concatenated to string type items ...',
  Object
    .values(frenchList)
    .flat()
    .map(({ name, description = '###' }) => `${ name }: ${ description }`)
  //.map(({ name, description = '###' }) => [name, description].join(': '))
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

@fyardlest ... In case the OP might have not noticed yet, according to the OP's own answer and the there demonstrated requirement changes I slightly adapted the above logging example by providing a 2nd alternative which does concatenate `name` and `description`. — Peter Seliger, Aug 31 '21 at 08:04

score 0 · Answer 2 · edited Aug 29 '21 at 07:29

Hello guys and thank you for the response. @Andreas I do listen to your advice and I have tried so far to solve this on my own, and learn about Object.keys, Object.values and Object.entries for the first time. So think you for that! Now it is time to learn about .flat() method from @Peter Seliger!

const frenchList = {
  u: [{
    id: 1,
    rating: 5,
    name: 'Uranophobie',
    description: 'Peur des cieux.',
  }, {
    id: 2,
    rating: 5,
    name: 'Urinophobie',
  }],
  v: [{
    id: 3,
    rating: 5,
    name: 'Vermiphobie',
    description: 'Peur des vers.',
  }],
};

const myList = Object.entries(frenchList).map(([key, value]) =>
  value.map(val => `${val.name}: ${val.description}`)
)
console.log(myList);

.as-console-wrapper { min-height: 100%!important; top: 0; }

I return what I exactly want in my React application (val.name & val.description). Thanks again guys!

I made your own solution an executable snippet which clearly shows the result being not just a single list of string items but a nested list of the latter. Thus in order to get returned an array of concatenated name and description values the above approach has to use [`flatMap`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap) instead of `map` for the outer iteration. — Peter Seliger, Aug 31 '21 at 08:00

score -1 · Answer 3 · answered Aug 27 '21 at 17:50

you can create a new const and make map with return only with attributes that necessary.

const newfrenchList = {
  u: frenchList.u.map(f => {
        const nFresh = {
            name: f.name,
            description: f.description
        };
        return nFresh;
   })
}

How does one map just once all items of several of an object's direct child-arrays?

3 Answers3