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

Posted 2023-02-22

【中文标题】React：将嵌套的 json 数据与父数据合并以创建多个对象

【英文标题】：React: Merging nested json data with parent data to create multiple objects

【发布时间】：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"

【问题讨论】：

有可能。

【参考方案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

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

免责声明：我是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)