对相同值的项目数组进行分组答案

【问题标题】：Group array of item on same value对相同值的项目数组进行分组
【发布时间】：2020-08-14 08:14:11
【问题描述】：

您好，我的数组如下：

我的数组：

[
  {
    "Id": 72,
    "PropertyId": 58,
    "folderName": "test2",
    "supportingDocs": [
      {
        "FilePath": "path",
        "FileName": "green-logo.png",
        "UploadedDate": "2020-04-29T15:00:41.423"
      }
    ]
  },
  {
    "Id": 71,
    "PropertyId": 58,
    "folderName": "test1",
    "supportingDocs": [
      {
        "FilePath": "path",
        "FileName": "red-logo.png",
        "UploadedDate": "2020-04-29T15:00:41.423"
      }
    ]
  },
   {
    "Id": 70,
    "PropertyId": 58,
    "folderName": "test2",
    "supportingDocs": [
      {
        "FilePath": "path",
        "FileName": "orange-logo.png",
        "UploadedDate": "2020-04-29T15:00:41.423"
      }
    ]
  }
]

如果 FolderName 相同，我想组合成一个并在 supportDocs 数组中添加两个常用文件夹 supportDocs 的数据，所以我希望 像这样输出：

[
  {
    "Id": 72,
    "PropertyId": 58,
    "folderName": "test1",
    "supportingDocs": [
      {
        "FilePath": "path",
        "FileName": "green-logo.png",
        "UploadedDate": "2020-04-29T15:00:41.423"
      }
    ]
  },
  {
    "Id": 71,
    "PropertyId": 58,
    "folderName": "test2",
    "supportingDocs": [
      {
        "FilePath": "path",
        "FileName": "red-logo.png",
        "UploadedDate": "2020-04-29T15:00:41.423"
      },{
        "FilePath": "path",
        "FileName": "orange-logo.png",
        "UploadedDate": "2020-04-29T15:00:41.423"
      }
    ]
  }

]

我尝试过使用 indexOf 但没有工作如果文件夹名称相同，任何解决方案来分组数组

【问题讨论】：

标签： javascript json angular typescript

【解决方案1】：

有很多方法可以解决这个问题。这是一个使用Array.reduce()的示例：

const result = data.reduce((acc, curr) => {  
  const existing = acc.find(e => e.folderName == curr.folderName);
  if (existing) {
    existing.supportingDocs = existing.supportingDocs.concat(curr.supportingDocs);
  } else {
    acc.push(curr);
  }
  return acc;
}, []);

在我的代码中，我还使用了Array.find()、Array.concat() 和Array.push()。

请看下面的可运行代码sn-p。

const data = [
  {
    "Id": 72,
    "PropertyId": 58,
    "folderName": "test2",
    "supportingDocs": [
      {
        "FilePath": "path",
        "FileName": "green-logo.png",
        "UploadedDate": "2020-04-29T15:00:41.423"
      }
    ]
  },
  {
    "Id": 71,
    "PropertyId": 58,
    "folderName": "test1",
    "supportingDocs": [
      {
        "FilePath": "path",
        "FileName": "red-logo.png",
        "UploadedDate": "2020-04-29T15:00:41.423"
      }
    ]
  },
   {
    "Id": 70,
    "PropertyId": 58,
    "folderName": "test2",
    "supportingDocs": [
      {
        "FilePath": "path",
        "FileName": "orange-logo.png",
        "UploadedDate": "2020-04-29T15:00:41.423"
      }
    ]
  }
]

const result = data.reduce((acc, curr) => {  
  const existing = acc.find(e => e.folderName == curr.folderName);
  if (existing) {
    existing.supportingDocs = existing.supportingDocs.concat(curr.supportingDocs);
  } else {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(result);

【讨论】：

【解决方案2】：

一个愚蠢的方法：

let origin = [
  {
    "Id": 72,
    "PropertyId": 58,
    "folderName": "test2",
    "supportingDocs": [
      {
        "FilePath": "path",
        "FileName": "green-logo.png",
        "UploadedDate": "2020-04-29T15:00:41.423"
      }
    ]
  },
  {
    "Id": 71,
    "PropertyId": 58,
    "folderName": "test1",
    "supportingDocs": [
      {
        "FilePath": "path",
        "FileName": "red-logo.png",
        "UploadedDate": "2020-04-29T15:00:41.423"
      }
    ]
  },
   {
    "Id": 70,
    "PropertyId": 58,
    "folderName": "test2",
    "supportingDocs": [
      {
        "FilePath": "path",
        "FileName": "orange-logo.png",
        "UploadedDate": "2020-04-29T15:00:41.423"
      }
    ]
  }
];

let temp = [];
let output = [];
for( key in origin ) {
  let each = origin[key];
  let folderName = each["folderName"];
  
  if(temp.includes(folderName)){
    // if the foldername already exist.
    for ( i in output ){
      if(getKeyByValue(output[i], folderName) != undefined){
        output[i]["supportingDocs"].push(each["supportingDocs"][0]);
      }
    }
  } else {
    // if the foldername not exist    
    temp.push(folderName);
    output.push(each);
  }
}

console.log(output);

// find object key by value, not recursive.
function getKeyByValue(object, value) {
  return Object.keys(object).find(key => object[key] === value);
}

【讨论】：