Question

我有一个具有以下格式的JavaScript数组：

[
    {
     "header": true,
     "id": "0",
     "name": "dairy",
   },
    {
     "category": "dairy",
     "header": false,
     "id": "-LSlje6ESGALGpckMhb7",
     "name": "milk",
   },
    {
     "category": "dairy",
     "header": false,
     "id": "-LSm9EpFg5DhW036aUle",
     "name": "cheese",
   },
    {
     "header": true,
     "id": "3",
     "name": "dessert",
   },
    {
     "category": "dessert",
     "header": false,
     "id": "-LSm9MLZkrnvtPySw5U6",
     "name": "cake",
   },
    {
     "category": "dessert",
     "header": false,
     "id": "-LSmAQ0rdDLrpz0TSPuD",
     "name": "pie",
   },
    {
     "header": true,
     "id": "6",
     "name": "fruit",
   },
    {
     "category": "fruit",
     "header": false,
     "id": "-LSlazVIGAKLakxAIa8G",
     "name": "apple",
   },
    {
     "category": "fruit",
     "header": false,
     "id": "-LSlb5GH6xZz-DpNVS22",
     "name": "pear",
   },
    {
     "category": "fruit",
     "header": false,
     "id": "-LSwWJldY1nxQrotyv-V",
     "name": "strawberry",
   },
    {
     "header": true,
     "id": "10",
     "name": "meat",
   },
    {
     "category": "meat",
     "header": false,
     "id": "-LSljXQzfXthJbOA54Ah",
     "name": "fish",
   },
    {
     "category": "meat",
     "header": false,
     "id": "-LSmA2-R9pOY8abAUyST",
     "name": "steak",
   },
    {
     "category": "meat",
     "header": false,
     "id": "-LSmAJ4J4gIfVQ8sgPDa",
     "name": "pork",
   },
 ]

我想做的是通过此数组映射，并将其转换为以下格式：

[
  {
    title: nameOfFirstHeader,
    data: items.slice(indexOfFirstHeader, indexOfSecondHeader),
  },
  {
    title: nameOfSecondHeader,
    data: items.slice(indexOfSecondHeader, indexOfThirdHeader),
  },
  {
    title: nameOfThirdHeader,
    data: items.slice(indexOfThirdHeader, indexOfFourthHeader),
  },...and so on
]

因此，基本上在原始数组中找到的每个“标头”都有一个对象部分。每个对象部分的数据属性将包含在第一个标头和第二个标头之间找到的项目，依此类推，直到没有更多标头为止。我真的无法全神贯注于如何做到这一点。这是我正在使用的模块的参考：https://github.com/saleel/react-native-super-grid#sectiongrid-example

谢谢！

Answer 1

我认为这可能是您想要实现的目标...

var grouped = items.reduce((acc,obj)=>{
   let {header, name} = obj;

   if (header) return [...acc, { title:name, data:[] }] // either first matching header or new match. Add fresh 'header' object
   if (!acc.length) return acc;        //not header and none have passed. Do nothing

   let allButLast = acc.slice(0, acc.length-1),
       lastElem = acc[acc.length-1];  // not a header, but there is an existing match. Add it to last match's data array

   return [
      ...allButLast, 
      {
         ...lastElem, 
         data:[...lastElem.data, obj]
      }
  ]
},[])

但是，为此目的，信任数组的顺序似乎并不可靠。通过isHeader.name === notHeader.category进行匹配可能会更可靠，以免对要遍历的数据的顺序进行推测。这样...

var grouped = items.reduce((acc,obj)=>{
   let {header, name, category} = obj;

   if (header) return [...acc, { title:name, data:[] }];
   if (!acc.length) return acc;        

   return acc.map((elem)=>{
      if (elem.title !== category) return elem; 
      return {
        ...elem,
        data: [ ...elem.data, obj]
      };
   })
},[])

Answer 2

我认为您可能可以做类似的事情

const data = [];
let activeIndexForData = -1;

for(let i = 0; i < dataToSort.length -1; i++) {
   if(dataToSort[i].header) {
       activeIndexForData++;
   }

   if(data.length < activeIndexForData - 1) {
       data.push({ title: dataToSort[i].name, data@ []})
   }
   else {
      data[activeIndexForData].data.push({ title: dataToSort[i].name, data: [])
   }
}

需要帮助格式化JavaScript中的数组

2 个答案: