.Map Array inside Array

Question

I´m trying to filter the data but i have an array inside an array, and i have no idea how can i get those! Also there is a property called 'toString' and thats might be a problem (function)

        const filterteste = this.state.example.changelog.histories.map(item => (
        {
          id: item.id,            
          created: item.created,
          field: item.items.field,
          fromStringprop: item.items.fromString,
          toStringprop: item.items.toString,
        }
      ));

Desired Ouput: I´m trying to filter the array soo i have a clean array with the properties i will need

{
   created: 
   id:
   field:
   fromString:
   toString:
}

Problem:

You need to explain more specifically what you want to do. Filter what exactly? What is the expected output? Clarify a bit please. — Chris
– Chris, Commented Jun 11, 2018 at 10:03
In your .map handler, you can call .map(item.items) to map the child array, or any other Array method (do you maybe need something like .reduce or .filter for the child array?) — Fabio Lolli
– Fabio Lolli, Commented Jun 11, 2018 at 10:08
Hi @Chris ! I´m trying to have a clean array with the properties i need only! — zemmsoares
– zemmsoares, Commented Jun 11, 2018 at 10:09
How would you handle the author with id 56617 that seems to have an array of 2 items? How does that datastructure look like? — Icepickle
– Icepickle, Commented Jun 11, 2018 at 10:10
@Icepickle i´ve deleted Author property but its an object Author {name:example, id: example}, but i´m not going to need it! — zemmsoares
– zemmsoares, Commented Jun 11, 2018 at 10:15

Fabio Lolli · Accepted Answer · 2018-06-11 10:22:23Z

const filterteste = this.state.example.changelog.histories.map(item => {
    //instead of returning a single item, we return an array!
    return item.items.map(childItem => {
        return {
            id: item.id,            
            created: item.created,
            field: childItem.field,
            fromStringprop: childItem.fromString,
            toStringprop: childItem.toString,
        };
    });
});

With this code you're mapping the base array elements, and each of these elements is returned as a map of the child elements - does this make sense?

After this you will still have an array, like so:

[
    [
        //item1,
        //item2
    ],
    [
        //item3
    ]
]

At this point we can just call reduce on this array to get to our expected result...

let resultOfArrayMap = theMapFunctionFromTopOfThePost(baseArray);
const properlyMappedArray = resultOfArrayMap.reduce((arrayBeingBuilt, currValue) => {
    return arrayBeingBuilt.concat(...currValue);
}, []);

This starts from an empty array, for each item in our mapped array it concats all of the child items in a new array, then proceeds to the next item and keeps contatenating other items to the array returned by processing the previous element...

It should now look like this:

[
    //item1,
    //item2,
    //item3
]

Manoz · Accepted Answer · 2018-06-11 10:18:25Z

1

You could simply filter out them as

 const filterteste = this.state.example.changelog.histories.map(item => (
        {
          id: item.id,            
          created: item.created,
          field: item.items.field,
          fromStringprop: item.items.filter((item)=> return item.fromString != null),
          toStringprop: item.items.filter((item)=> return item.toString != null)
        }
      ));

answered Jun 11, 2018 at 10:18

Manoz

6,62713 gold badges72 silver badges117 bronze badges

1 Comment

Manoz Over a year ago

would you please make sure that item.items is not stringify?

Collectives™ on Stack Overflow

.Map Array inside Array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related