javascript - JS nested array.map - Stack Overflow

admin管理员组

文章数量:1406942

Hi I have the following data:

data = [{due_at: '2019-09-10', yards:[{name: 'test'},{name: 'test2'}]}...]

I am wanting to iterate over this date to result in:

events = [{start: '2019-09-10', end: '2019-09-10, title: 'test'},{start: '2019-09-10', end: '2019-09-10, title: 'test2'}...]

I have tried using the following nested map:

events = data.map(d => {
    return d.yards.map(y => {
      return {
        start: d.due_at,
        end: d.due_at,
        title: y.name
      };
    });
  });

Which works to a point but I keep getting back a nested array like so:

[[{start: '2019-09-10', end: '2019-09-10, title: 'test'},{start: '2019-09-10', end: '2019-09-10, title: 'test2'}...]]

How can I adjust my map code to output a single array of objects?

Hi I have the following data:

data = [{due_at: '2019-09-10', yards:[{name: 'test'},{name: 'test2'}]}...]

I am wanting to iterate over this date to result in:

events = [{start: '2019-09-10', end: '2019-09-10, title: 'test'},{start: '2019-09-10', end: '2019-09-10, title: 'test2'}...]

I have tried using the following nested map:

events = data.map(d => {
    return d.yards.map(y => {
      return {
        start: d.due_at,
        end: d.due_at,
        title: y.name
      };
    });
  });

Which works to a point but I keep getting back a nested array like so:

[[{start: '2019-09-10', end: '2019-09-10, title: 'test'},{start: '2019-09-10', end: '2019-09-10, title: 'test2'}...]]

How can I adjust my map code to output a single array of objects?

• javascript
• arrays

Share Follow asked Sep 10, 2019 at 2:45 PedroPedro 1,17855 gold badges1818 silver badges3838 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You could use .flatMap() instead of .map() on your outer-map function to "flatten" the contents into your resulting array from your inner map function:

const data = [{
  due_at: '2019-09-10',
  yards: [{
    name: 'test'
  }, {
    name: 'test2'
  }]
}];

const events = data.flatMap(d => {
  return d.yards.map(y => {
    return {
      start: d.due_at,
      end: d.due_at,
      title: y.name
    };
  });
});

console.log(events);

However, .flatMap() doesn't have the best browser support at the moment, so, if you're after something a little more browser patible, you can use .reduce() instead of .flatMap():

const data = [{
  due_at: '2019-09-10',
  yards: [{
    name: 'test'
  }, {
    name: 'test2'
  }]
}];

const events = data.reduce((a, {due_at: start, yards}) => 
  [...a, ...yards.map(({name:title}) => ({start, end: start, title}))],
[]);

console.log(events);

Rather than having a nested map (resulting in a 2D return value), you could declare a new array and only push the values you'd like. This results in a 1D array.

const data = [
  { due_at: "2019-09-10", yards: [{ name: "test" }, { name: "test2" }] }
];

const results = [];

data.forEach(d => {
  d.yards.forEach(y => {
    results.push({
      start: d.due_at,
      end: d.due_at,
      title: y.name
    });
  });
});

console.log(results);

本文标签： javascriptJS nested arraymapStack Overflow