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

It is possible.

onin
– onin

2021-01-08 03:40:36 +00:00
Commented Jan 8, 2021 at 3:40 — onin
– onin, Commented Jan 8, 2021 at 3:40

Todd Skelton · Accepted Answer · 2021-01-08 04:02:05Z

2

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)

edited Jan 8, 2021 at 4:02

answered Jan 8, 2021 at 3:44

Todd Skelton

7,2893 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vincent · Accepted Answer · 2021-05-10 15:31:18Z

Here is an iterative solution using object-scan

It's a bit easier to reason about in my opinion, but does require a dependency. So if you're new to javascript, I'd recommend you stick with @Todds solution for now. But maybe something to revisit once you gain a bit more experience and do more data processing.

// 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/[email protected]"></script>

Disclaimer: I'm the author of object-scan

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related