Question

这里是具有类别以及每个类别所属的解决方案的对象的数组。解决方案是重复的，但类别是唯一的。

const categories = [
  { category: 'Patch Leads', solution: 'Data Solutions' },
  { category: 'Cables', solution: 'Data Solutions' },

  { category: 'Nails', solution: 'Hardware' },
  { category: 'Locks', solution: 'Hardware' },
  { category: 'Screws', solution: 'Hardware' },

  { category: 'Cabinets', solution: 'Cabinet Solutions' },
  { category: 'Swing Frames', solution: 'Cabinet Solutions' },
  { category: 'Racks', solution: 'Cabinet Solutions' },

  { category: 'Fire Cables', solution: 'Fire Solutions' },

];

我需要返回解决方案对象的新解决方案数组。这是最终结果的格式。像id的索引一样循环时，获得此格式的所有数据都是可用的，但我只是无法正确获取代码的格式。

const solutions = [
  {
    id: "0",
    name: "Data Solutions",
    categories: [
      {
        id: "0",
        name: "Cables",
        slug: "cables"
      },
      {
        id: "1",
        name: "Patch Leads",
        slug: "patch-leads"
      }
    ]
  },
  {
    id: "1",
    name: "Hardware",
    categories: [
      {
        id: "0",
        name: "Nails",
        slug: "nails"
      },
      {
        id: "1",
        name: "Locks",
        slug: "locks"
      },
      {
        id: "2",
        name: "Screws",
        slug: "screws"
      }
    ]
  },
  {
    id: "2",
    name: "Cabinet Solutions",
    categories: [
      {
        id: "0",
        name: "Cabinets",
        slug: "cabinets"
      },
      {
        id: "1",
        name: "Swing Frames",
        slug: "swing-frames"
      },
      {
        id: "2",
        name: "Racks",
        slug: "racks"
      }
    ]
  },
  {
    id: "3",
    name: "Fire Solutions",
    categories: [
      {
        id: "0",
        name: "Fire Cables",
        slug: "gire-cables"
      }
    ]
  }
]

Answer 1

您可以使用reduce()方法来做到这一点。迭代时，如果当前项目已经存在，则将当前类别添加到现有项目。如果没有，请使用当前类别创建一个新项目。

const categories = [ { category: 'Patch Leads', solution: 'Data Solutions' }, { category: 'Cables', solution: 'Data Solutions' }, { category: 'Nails', solution: 'Hardware' }, { category: 'Locks', solution: 'Hardware' }, { category: 'Screws', solution: 'Hardware' }, { category: 'Cabinets', solution: 'Cabinet Solutions' }, { category: 'Swing Frames', solution: 'Cabinet Solutions' }, { category: 'Racks', solution: 'Cabinet Solutions' }, { category: 'Fire Cables', solution: 'Fire Solutions' }, ];

var solutions = categories.reduce((acc, curr) => {
  let item = acc.find(item => item.name === curr.solution);

  if (item) {
    item.categories.push({
      "id": item.categories.length,
      "name": curr.category,
      "slug": curr.category.toLowerCase().replace(' ', '-')
    });
  } else {
    acc.push({
      "id": acc.length,
      "name": curr.solution,
      "categories": [{
        "id": 0,
        "name": curr.category,
        "slug": curr.category.toLowerCase().replace(' ', '-')
      }]
    });
  }

  return acc;
}, []);

console.log(solutions);

Answer 2

下面的代码创建一个解决方案类别的中间数组映射，然后使用它通过使用映射对象的键和值来生成所需格式的输出。

const categories = [
  { category: 'Patch Leads', solution: 'Data Solutions' },
  { category: 'Cables', solution: 'Data Solutions' },

  { category: 'Nails', solution: 'Hardware' },
  { category: 'Locks', solution: 'Hardware' },
  { category: 'Screws', solution: 'Hardware' },

  { category: 'Cabinets', solution: 'Cabinet Solutions' },
  { category: 'Swing Frames', solution: 'Cabinet Solutions' },
  { category: 'Racks', solution: 'Cabinet Solutions' },

  { category: 'Fire Cables', solution: 'Fire Solutions' },

];

const solutionMap = categories.reduce((acc,item) => {
 if(!acc[item.solution]) 
   acc[item.solution] = [];
 acc[item.solution].push(item.category); 
 return acc;
},{});

const solutions = Object.entries(solutionMap).map(([key,val],id) => ({
  id,
  name: key,
  categories: val.map((category,idx) => ({id: idx, name: category, slug: category.toLowerCase().replace(' ','-')}))
}));

console.log(solutions);

Answer 3

您可以使用一些类来更快地重新创建对象。

when

Answer 4

将解析和构建合并为一个操作，将产生以下代码：

const categories = [
  { category: 'Patch Leads', solution: 'Data Solutions' },
  { category: 'Cables', solution: 'Data Solutions' },

  { category: 'Nails', solution: 'Hardware' },
  { category: 'Locks', solution: 'Hardware' },
  { category: 'Screws', solution: 'Hardware' },

  { category: 'Cabinets', solution: 'Cabinet Solutions' },
  { category: 'Swing Frames', solution: 'Cabinet Solutions' },
  { category: 'Racks', solution: 'Cabinet Solutions' },

  { category: 'Fire Cables', solution: 'Fire Solutions' },

];

const solutionMap = categories.reduce(function(solutions, item) {
  const solution = item.solution;
  const category = item.category;
  const solutionId = Object.keys(solutions).length;
  let solutionCategory = solutions[solution];
  
  if (!solutionCategory) {
    solutionCategory = solutions[solution] = {
      id: solutionId,
      name: solution,
      categories: []
    };
  }
  solutionCategory.categories.push({
    id: solutionCategory.categories.length.toString(),
    name: category,
    slug: category.toLowerCase().replace(' ','-')
  });
  return solutions;
}, {});

const solutions = Object.values(solutionMap);
console.log(solutions);

合并具有相同值的对象数组中的对象

4 个答案: