React：将嵌套的 json 数据与父数据合并以创建多个对象答案

【问题标题】：React: Merging nested json data with parent data to create multiple objectsReact：将嵌套的 json 数据与父数据合并以创建多个对象
【发布时间】：2021-04-13 19:30:54
【问题描述】：

我有一个对包含一些事件的 JSON 文件的 API 调用。这个事件有一个标题，但有几个放映时间。是否可以将嵌套数组与父对象合并，从而在没有嵌套数组的情况下创建 n 个新事件？

活动

{
    "publication_date": "8.1.2021 4:18",
    "title": "Camerata Salzburg",
    "showtime": [
        {
            "date_start": "2021-02-05",
            "location": "Konzerthaus"
        },
        {
            "location": "Konzerthaus",
            "date_start": "2021-02-07"
        }
    ],
}

我希望我的活动如何

{
    "publication_date": "8.1.2021 4:18",
    "title": "Camerata Salzburg",
    "date_start": "2021-02-05",
    "location": "Konzerthaus"
},
{
    "publication_date": "8.1.2021 4:18",
    "title": "Camerata Salzburg",
    "location": "Konzerthaus",
    "date_start": "2021-02-07"
}

【问题讨论】：

有可能。

标签： javascript arrays json reactjs jsx

【解决方案1】：

这是一个使用object-scan的迭代解决方案

在我看来这更容易推理，但确实需要依赖。因此，如果您是 javascript 新手，我建议您现在坚持使用 @Todds 解决方案。但是，一旦您获得更多经验并进行更多数据处理，也许需要重新审视。

// const objectScan = require('object-scan');

const myData = [{ publication_date: '8.1.2021 4:18', title: 'Camerata Salzburg', showtime: [ { date_start: '2021-02-05', location: 'Konzerthaus' }, { location: 'Konzerthaus', date_start: '2021-02-07' } ] }];

const flatten = (data) => objectScan(['[*].showtime[*]'], {
  reverse: false,
  filterFn: ({ value, gparent, context }) => {
    const { publication_date, title } = gparent;
    context.push({ publication_date, title, ...value });
  }
})(data, []);

console.log(flatten(myData));
/* => [
 { publication_date: '8.1.2021 4:18', title: 'Camerata Salzburg', date_start: '2021-02-05', location: 'Konzerthaus' },
 { publication_date: '8.1.2021 4:18', title: 'Camerata Salzburg', location: 'Konzerthaus', date_start: '2021-02-07' }
] */

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

&lt;script src="https://bundle.run/object-scan@16.0.0"&gt;&lt;/script&gt;

免责声明：我是object-scan的作者

【讨论】：

【解决方案2】：

您可以在数组上使用map 函数并创建一个新数组。如果您的原始数据也是一个数组，您可以先映射它，然后再映射内部数组。这将创建一个数组数组，但您可以将flat 放在它上面以将它们合并为一个数组。

const data = [{
  "publication_date": "8.1.2021 4:18",
  "title": "Camerata Salzburg",
  "showtime": [
    {
      "date_start": "2021-02-05",
      "location": "Konzerthaus"
    },
    {
      "location": "Konzerthaus",
      "date_start": "2021-02-07"
    }
  ],
}]

const newData = data.map(title => title.showtime.map(e => ({
  publication_date: title.publication_date,
  title: title.title,
  date_start: e.date_start,
  location: e.location
}))).flat();

console.log(newData)

【讨论】：