如何使用reduce按属性对数组中的项目进行分组并返回新对象数组

如何解决如何使用reduce按属性对数组中的项目进行分组并返回新对象数组

考虑这个对象数组：

const relatedSites = [
  {
    "SubdomainName": "client1","ClientName": "Eastern Region","ClientAlias": "eastern-region"
  },{
    "SubdomainName": "client1","ClientName": "City of Knox","ClientAlias": "knox"
  },{
    "SubdomainName": "client2","ClientAlias": "knox"
  }
]

我想通过“SubdomainName”属性对它们进行分组，并使用reduce返回一组新创建的对象，以便得到结果：

[
  {
    "title": "client1","links": [
      {
        "url": "https://client1.com/eastern-region","displayText": "Eastern Region"
      },{
        "url": "https://client1.com/knox","displayText": "City of Knox"
      }
    ]
  },{
    "title": "client2","links": [
      {
        "url": "https://client2.com/eastern-region",{
        "url": "https://client2.com/knox","displayText": "City of Knox"
      }
    ]
  }
]

到目前为止，这是我的解决方案，但我认为它看起来有点笨拙，有没有更有效的方法？如果我没有按标题找到它，我不喜欢我创建一个新组的方式，并且根据是否找到它的索引将组推送到数组感觉不整洁。有没有更优雅的方式来达到同样的结果？

  const groupRelatedSites = (groups,item) => {
    const group = groups.find(gp => gp.title === item.SubdomainName) || { title: item.SubdomainName,links: [] };
    const index = groups.findindex(group => group.title === item.SubdomainName);
    const link = { url: `https://${item.SubdomainName}.com/${item.ClientAlias}`,displayText: item.ClientName };
    group.links = [...group.links,link];

    if (index === -1) {
      groups.push(group);
    } else {
      groups[index] = group;
    }
    return groups;
  };

  const grouped = relatedSites.reduce(groupRelatedSites,[]);

解决方法

您应该可以使用reduce在几行中完成此操作，我们使用子域名作为键创建一个映射，然后我们将使用Object.values将结果对象转换为数组。

例如：

const relatedSites = [ { "SubdomainName": "client1","ClientName": "Eastern Region","ClientAlias": "eastern-region" },{ "SubdomainName": "client1","ClientName": "City of Knox","ClientAlias": "knox" },{ "SubdomainName": "client2","ClientAlias": "knox" } ]; 

const result = Object.values(relatedSites.reduce((acc,el) => { 
    acc[el.SubdomainName] = acc[el.SubdomainName] || { title: el.SubdomainName,links: [] };
    acc[el.SubdomainName].links.push({ url: `https://${el.SubdomainName}.com/${el.ClientAlias}`,displayText: el.ClientName });
    return acc;
},{}))

console.log(result)

,

你很接近，但让它变得比需要的更复杂

const relatedSites = [{
    "SubdomainName": "client1","ClientAlias": "eastern-region"
  },{
    "SubdomainName": "client1","ClientAlias": "knox"
  },{
    "SubdomainName": "client2","ClientAlias": "knox"
  }
]

let data = relatedSites.reduce((b,a) => {
    let ind = b.findIndex(e => e.title === a.SubdomainName)
    let obj = {
      url: "https://" + a.SubdomainName + ".com/" + a.ClientAlias,displayText: a.ClientAlias
    };
    if (ind > -1) {
      b[ind].links.push(obj)
    } else {
      b.push({
        "title": a.SubdomainName,"links": [obj]
      })
    }
    return b;
  },[]);

console.log(data)

,

const relatedSites = [{"SubdomainName": "client1","ClientAlias": "eastern-region"},{"SubdomainName": "client1","ClientAlias": "knox"},{"SubdomainName": "client2","ClientAlias": "knox"}];

const out = relatedSites.reduce((a,b) => {
  const title = b.SubdomainName;
  let obj = a.find(x => x.title === title);
  if (!obj) a.push({
    title: title,links: [{ 
      url: `https://${title}.com/${b.ClientAlias}`,displayText: b.ClientName,}] });
  else obj.links.push({
    url: `https://${title}.com/${b.ClientAlias}`,});
  return a;
},[]);

console.log(out);