JavaScript how to map over two arrays one object

Question

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?

https://stackoverflow.com/questions/32937181/javascript-es6-map-multiple-arrays — Murat Karagöz, Jun 14 '19 at 08:21

score 3 · Answer 1 · edited Jun 14 '19 at 08:24

3

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.

edited Jun 14 '19 at 08:24

CertainPerformance

356,069
52
309
320

answered Jun 14 '19 at 08:23

Amadan

191,408
23
240
301

Nice, I'd do that in a chain rather than nested: `[x,y,z].flatMap(f => fileContent[f]).map(name => etc` – georg Jun 14 '19 at 08:41

score 2 · Accepted Answer · answered Jun 14 '19 at 08:21

2

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} />)
);

answered Jun 14 '19 at 08:21

CertainPerformance

356,069
52
309
320

this is still nested. – Avin Kavish Jun 14 '19 at 08:28
OP is looking for an array of arrays, so there's no way to avoid nesting *once*. – CertainPerformance Jun 14 '19 at 08:29
1

hmm.... I think his original code is doing something wrong, the first array is not nested but the other two are. – Avin Kavish Jun 14 '19 at 08:31

score 1 · Answer 3 · answered Jun 14 '19 at 08:27

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

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

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

score 1 · Answer 4 · answered Jun 14 '19 at 08:28

1

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

answered Jun 14 '19 at 08:28

Agam kumar

11
2

Hi, please don't post code-only answers, explain what your code does and why. – georg Jun 14 '19 at 08:42

score 1 · Answer 5 · answered Jun 14 '19 at 08:33

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)

Ahmed Kamal · Answer 6 · 2019-06-14T08:44:08.593

0

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} />))

edited Jun 14 '19 at 08:44

answered Jun 14 '19 at 08:37

Ahmed Kamal

2,660
3
21
36

JavaScript how to map over two arrays one object

6 Answers6