CODEWITHSUNDEEP
javascriptreactjs
Suule
Suule

Reputation: 2468

JavaScript how to map over two arrays one object

I do have an object which is containing some field, three of them are arrays. And I would like to map over them in one go.

Let me show how I am doing it right now:

containerNames = this.state.fileContent.xContainers.map(xContainer => <Container containerName={xContainer} />);

containerNames.push(this.state.fileContent.yContainers.map(yContainer => <Container containerName={yContainer} />));

containerNames.push(this.state.fileContent.zContainers.map(zContainer => <Container containerName={zContainer} />));

For me it does seems like it could be made differently. With one lambda?

Upvotes: 2

Views: 128

Answers (6)

Ahmed Kamal
Ahmed Kamal

Reputation: 3000

If you want to merge the three arrays and map them you can do it like the following

[...xContainers, ...yContainers, ...zContainers].map(c => <Container containerName={c} />)

if you're okay with extra libs, you can use lodash

_.map(_.concat(xContainers, yContainers, zContainers), c => (<Container containerName={c} />))

Upvotes: 0

Francis Leigh
Francis Leigh

Reputation: 1960

In the mapToContainer function pass the c argument to your <Container containerName={c} />

const allow = ['xContainers', 'yContainers', 'zContainers']
const fileContent = {
  xContainers: [{name: '1'}, {name: '2'}, {name: '3'}],
  yContainers: [{name: '1'}, {name: '2'}, {name: '3'}],
  zContainers: [{name: '1'}, {name: '2'}, {name: '3'}],
  foo: {}
}

const mapToContainer = containers => containers.map(c => c.name)

const containerNames = 
  Object.keys(fileContent)
  .filter(k => allow.indexOf(k) !== -1)
  .reduce((prev, curr) => [...prev, ...mapToContainer(fileContent[curr])], [])

console.log(containerNames)

Upvotes: 1

Agam kumar
Agam kumar

Reputation: 11

containerNames = [...xContainers, ...yContainers, ...zContainers].map(
  containers => containers.map(container => <Container containerName={container} />)
);

Upvotes: 1

bkm412
bkm412

Reputation: 1057

const {fileContent : {xContainers, yContainers, zContainers}} = this.state;

const mergedArray = [
   ...xContainers,
   ...yContainers,
   ...zContainers
]

const containerNames = mergedArray.map(container => <Container containerName={container} />)

Upvotes: 1

Amadan
Amadan

Reputation: 198314

The code in OP will make something like [1, 2, 3, [4, 5, 6], [7, 8, 9]], which I hope is not what you want. If you want [1, 2, 3, 4, 5, 6, 7, 8, 9], use this:

const containerNames = ["xContainers", "yContainers", "zContainers"].
    flatMap(field => this.state.fileContent[field].map(...));

If you want [[1, 2, 3], [4, 5, 6], [7, 8, 9]], then change the flatMap into map.

Upvotes: 3

CertainPerformance
CertainPerformance

Reputation: 370729

You're looking to create an array of arrays, so use a .map nested inside another:

const { xContainers, yContainers, zContainers } = this.state.fileContent;
containerNames = [xContainers, yContainers, zContainers].map(
  containers => containers.map(container => <Container containerName={container} />)
);

Upvotes: 2

Related Questions