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

Question

我有一个对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"
}

Answer 1

您可以在数组上使用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)

Answer 2

以下是使用对象扫描的迭代解决方案

在我看来，这更容易推理，但确实需要依赖性。所以，如果您是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}

<script src="https://bundle.run/object-scan@16.0.0"></script>

免责声明：我是物体扫描的作者