React native: group array items to build a section list

Question

I'd like to create a section list in react native, but I have to organize my REST API JSON response.

Here is my JSON

{
"movies": [
    { "id": "1", "title": "Star Wars", "releaseYear": "1990" },
    { "id": "2", "title": "Back to the Future", "releaseYear": "1990" },
    { "id": "3", "title": "The Matrix", "releaseYear": "2010" },
    { "id": "4", "title": "Inception", "releaseYear": "2010" },
    { "id": "5", "title": "Interstellar", "releaseYear": "2010" }
  ]
}

I'd like to obtain a structure like this

{
"movies": [
    
   {
     "releaseYear": "1990", "data": [
         { "id": "1", "title": "Star Wars"},
         { "id": "2", "title": "Back to the Future"}
      ] 
   },
   {
     "releaseYear": "2010", "data": [
         { "id": "3", "title": "The Matrix" },
         { "id": "4", "title": "Inception" },
         { "id": "5", "title": "Interstellar" }
      ] 
   }
}

If I use reduce, I cannot obtain the structure I'd like to have (this is because I just "group by" elements and I'm not able to move the "releaseYear" property and create new object array with filtered properties)

TY in advance!

Answer 1

Use a reducer, try to get the release year group and add the data to the array. If it does not exist add the release year and add the movie to the data array.

const movies = [
  { id: "1", title: "Star Wars", releaseYear: "1990" },
  { id: "2", title: "Back to the Future", releaseYear: "1990" },
  { id: "3", title: "The Matrix", releaseYear: "2010" },
  { id: "4", title: "Inception", releaseYear: "2010" },
  { id: "5", title: "Interstellar", releaseYear: "2010" },
];

// Map the movies by release year
const moviesByReleaseYear = movies.reduce((acc, movie) => {
  const { releaseYear, ...restOfMovie } = movie;
  const group = acc.find((item) => item.relseaseYear === releaseYear);
  if (!group) {
    acc.push({
      relseaseYear: releaseYear,
      data: [restOfMovie],
    });
  } else {
    group.data.push(restOfMovie);
  }
  return acc;
}, []);
console.log(moviesByReleaseYear);