如果它们都在同一个对象数组中，如何通过匹配不同键的值在它们的类别下列出子类别

Question

我想从未组织的对象数组中的类别和子类别创建下拉菜单。

识别子类别的方法是因为它有一个“parent_id”键。类别没有。

所以理想情况下，我想收集所有具有相同“parent_id”的对象，在它们的父类别下匹配“_id”

子类别如下所示：

{
"_id": "69",
"name": "Breads",
"parent_id": "60",
"product_skus": [],
},

父类别如下所示：

{
"_id": "60",
"name": "Bakery",
"product_skus": [],
},

我是初学者，所以我可能使用了错误的逻辑。这是我目前所拥有的：

import data from "./data.json";

function App() {
  return (
    <div>
      {data.map((each, index) => {
        let category = "";
        let categoryID = "";
        let subCategory = "";
        let subCategoryID = "";

        if (!each.parent_id) {
          category = each.name;
          categoryID = each._id;
        } else {
          subCategory = each.name;
          subCategoryID = each.parent_id;
        }
        return (
          <div>
            <h1>{category}</h1>
            <p>{subCategory}</p>
          </div>
        );
      })}
    </div>
  );
}

export default App;

** 但是我缺少一个工具来按 id 将它们组合在一起** 换句话说，这是我还不能完成的部分：

if(categoryID === subCategoryID){
return (
          <div>
            <h1>{category}</h1>
            <p>{subCategory}</p>
          </div>
        );
}

谢谢，要做到这一点还有很长的路要走：

示例数据：此处有 2 个类别及其相应的子类别

[
  {
    "_id": "6181841060c425f76e57b5f1",
    "name": "Chocolat en Poudre",
    "slug": "cafe-the-chocolat-chocolat-en-poudre",
    "parent_id": "6181841060c425f76e57b5ad",
    "product_skus": [
      "14001104",
      "14002219",
      "14001109",
      "14002218",
      "14000754",
      "14002217"
    ],
    "rank": 14
  },
  {
    "_id": "6181841060c425f76e57b57b",
    "name": "Cafés Moulus",
    "slug": "cafe-the-chocolat-cafes-moulus",
    "parent_id": "6181841060c425f76e57b5ad",
    "product_skus": ["14001050", "14003114", "14001900", "14001047"],
    "rank": 3
  },
  {
    "_id": "6181841060c425f76e57b5ad",
    "name": "Café, Thé & Chocolat",
    "slug": "cafe-the-chocolat",
    "product_skus": [],
    "rank": 6
  },
  {
    "_id": "6181841060c425f76e57b58b",
    "name": "Capsules Compatibles Nespresso",
    "slug": "cafe-the-chocolat-capsules-compatible-nespresso",
    "parent_id": "6181841060c425f76e57b5ad",
    "product_skus": [
      "14003149",
      "14003140",
      "14003144",
      "14003143",
      "14003141",
      "14003148",
      "14003146",
      "14001894"
    ],
    "rank": 4
  },
  {
    "_id": "6181841060c425f76e57b5b7",
    "name": "Dosettes Tassimo",
    "slug": "cafe-the-chocolat-dosettes-tassimo",
    "parent_id": "6181841060c425f76e57b5ad",
    "product_skus": ["14003102", "14003104"],
    "rank": 7
  },
  {
    "_id": "6181841060c425f76e57b625",
    "name": "Desserts aux Fruits",
    "slug": "yaourts-et-desserts-desserts-aux-fruits",
    "parent_id": "6181841060c425f76e57b5f0",
    "product_skus": [
      "14003663",
      "14002031",
      "14000403",
      "14002036",
      "14002016",
      "14002030",
      "14002037",
      "14002035",
      "14000414",
      "14002034",
      "14003673",
      "14000412",
      "14003675",
      "14002033",
      "14003672",
      "14003674",
      "14002017"
    ],
    "rank": 60
  },
  {
    "_id": "6181841060c425f76e57b5f0",
    "name": "Yaourts & Desserts",
    "slug": "yaourts-et-desserts",
    "product_skus": [],
    "rank": 13
  },
  {
    "_id": "6181841060c425f76e57b5dd",
    "name": "Yaourts à Boire",
    "slug": "yaourts-et-desserts-yaourts-a-boire",
    "parent_id": "6181841060c425f76e57b5f0",
    "product_skus": [
      "14001981",
      "14001982",
      "14001645",
      "14001650",
      "14001980",
      "14001651",
      "14001979"
    ],
    "rank": 10
  },
  {
    "_id": "6181841060c425f76e57b5fe",
    "name": "Yaourts",
    "slug": "yaourts-et-desserts-yaourts",
    "parent_id": "6181841060c425f76e57b5f0",
    "product_skus": ["14001991", "14000363", "14000367"],
    "rank": 20
  }
]

Answer 1

在这里找到了完美的答案：

他将一个数组 (arr1) 抽象为一个 parent/child 关系，将其抽象为一个新数组 (arr2)：

arr2.map((child) => {
  for (let parent of arr1) {
    if (parent.id == child.source) {
      if (!parent.children) {
        parent.children = [];
      }
      parent.children.push(child);
    }
  }
});

console.log(arr1);

将此应用于我的原始问题会得到 28 个类别（父）和超过 130 个子类别（子）嵌套。


function App() {
  let mainCategories = [];
  let subCategories = [];

//this is to filter and separate

  data.map((each, index) => {
    if (!each.parent_id && !each.is_special) {
      mainCategories.push(each);
    } else if (each.parent_id && !each.is_special) {
      subCategories.push(each);
    }
  });

/* This is how we map through the sub-categories and 
if their 'parent_id' match the '_id' of the parent 
category, then we that object to the mainCategories 
inside a new key called 'sub'*/

  subCategories.map((sub) => {
    for (let category of mainCategories) {
      if (category._id == sub.parent_id) {
        if (!category.sub) {
          category.sub = [];
        }
        category.sub.push(sub);
      }
    }
  });

  console.log(mainCategories);

  return <p>{mainCategories[1].sub[0].name}</p>;
}

export default App;

如果它们都在同一个对象数组中，如何通过匹配不同键的值在它们的类别下列出子类别

How to list Sub-categories under their Categories if they are both in the same array of objects, by matching values of different keys

javascript

arrays

jsx

reactjs