javascript - 需要帮助根据属性将两个数组与对象映射在一起

Question

我正在尝试基于两个不同的数组创建多个列表。我有一个名为 categoryList 和 termsList 的数组。我想根据属性将术语列表分组到 categoryList 数组。

const categoriesList = [
   { name: 'Categories', slug: 'category' },
   { name: 'Tags', slug: 'post_tag' }
];

和

const termsList = [
   { id: 1, taxonomy: 'category', name: 'First category' },
   { id: 2, taxonomy: 'category', name: 'Second category' },
   { id: 3, taxonomy: 'post_tag', name: 'First tag' },
   { id: 4, taxonomy: 'post_tag', name: 'Second tag' }
];

categoriesList 中的属性 slug 始终与 termsList 中的分类法属性具有相同的值。我想要完成的是在 React 组件中:

<h1>Categories</h1>
<ul>
   <li>First category</li>
   <li>Second category</li>
</ul>

<h1>Tags</h1>
<ul>
   <li>First tag</li>
   <li>Second tag</li>
</ul>

我不知道该怎么做。一些帮助将不胜感激。谢谢!

Answer 1

你可以使用类似这样的东西让它工作:

const categoriesList = [
   { name: 'Categories', slug: 'category' },
   { name: 'Tags', slug: 'post_tag' }
];

const termsList = [
   { id: 1, taxonomy: 'category', name: 'First category' },
   { id: 2, taxonomy: 'category', name: 'Second category' },
   { id: 3, taxonomy: 'post_tag', name: 'First tag' },
   { id: 4, taxonomy: 'post_tag', name: 'Second tag' }
];

const result = 
    categoriesList
      .map(cl => ({
        [cl.name]: termsList.filter(tl => tl.taxonomy === cl.slug),
      }))
      .reduce((a, b) => ({ ...a, ...b }));

console.log(res);

// Result of console.log(res);
// 
// {
// 	Categories: [
// 		{
// 			id: 1,
// 			taxonomy: 'category',
// 			name: 'First category',
// 		},
// 		{
// 			id: 2,
// 			taxonomy: 'category',
// 			name: 'Second category',
// 		},
// 	],
// 	Tags: [
// 		{
// 			id: 3,
// 			taxonomy: 'post_tag',
// 			name: 'First tag',
// 		},
// 		{
// 			id: 4,
// 			taxonomy: 'post_tag',
// 			name: 'Second tag',
// 		},
// 	],
// };