javascript - React: Merging nested json data with parent data to create multiple objects

Question

I have an API call to an JSON file which has some events. This events have one title but several showtimes. Is it possible to merge the nested array with the parent object and thus, creating n new events without nested arrays?

Events

{
    "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"
        }
    ],
}

How I would like my Events

{
    "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"
}

question from:https://stackoverflow.com/questions/65623107/react-merging-nested-json-data-with-parent-data-to-create-multiple-objects

Answer 1

You can use the map function on the array and create a new array. If your original data is also an array, you can map it first then map the inner array. This will create an array of arrays, but you can fall flat on it to merge them into a single array.

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)