React Native:群组数组项目以建立区段清单[已关闭]

s4n0splo  于 2022-12-14  发布在  React
关注(0)|答案(4)|浏览(98)

已关闭。此问题需要details or clarity。当前不接受答案。
**想要改进此问题吗?**通过editing this post添加详细信息并阐明问题。

4小时前关门了。
Improve this question
我想在react native中创建一个节列表,但是我必须组织我REST API JSON响应。
下面是我的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" }
  ]
}

我想得到这样的结构

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

如果我使用reduce,我就无法获得我想要的结构(这是因为我只是“group by”元素,无法移动“releaseYear”属性并创建具有过滤属性的新对象数组)
TY先行!

ukqbszuj

ukqbszuj1#

使用一个reducer,尝试获取发行年份组并将数据添加到数组。如果不存在,则添加发行年份并将电影添加到数据数组。

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);
hivapdat

hivapdat2#

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

const result = movies.reduce((p, c) => {
    const found = p.findIndex(p => p.releaseYear === c.releaseYear);
    if (found !== -1) {
        p[found].data.push({ id: c.id, title: c.title });
    } else {
        p.push({ releaseYear: c.releaseYear, data: [{ id: c.id, title: c.title }] });
    }

    return p;
}, []);

console.log(result);
yk9xbfzb

yk9xbfzb3#

您可以使用Array.reduce()releaseYear对电影进行分组,从而为每年创建一个数据数组。
这将创建一个Map对象,该对象为每个年份提供一个属性,然后我们可以使用Object.values()将结果作为数组来获取。
我们将其赋给result对象中的movies属性。
第一个

ppcbkaq5

ppcbkaq54#

function makeResponse(obj) {
  const map = {};
  const finalArr = [];

  obj.movies.map((item) => {
    const { releaseYear, ...rest } = item;

    if (!map[item.releaseYear]) {
      map[item.releaseYear] = true;
      finalArr.push({ releaseYear, data: [rest] });
    } else {
      const index = finalArr.findIndex(
        (i) => i.releaseYear === item.releaseYear
      );

      finalArr[index] = {
        releaseYear: finalArr[index].releaseYear,
        data: [...finalArr[index].data, rest],
      };
    }
  });

  return finalArr;
}

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

makeResponse(obj);

相关问题