如何打印json对象数组以将所有值打印为类别和子类别

时间:2021-08-01 14:54:44

标签: javascript reactjs

我有一个包含类别和子类别的 json 对象。如图所示,我需要以特定方式打印。以下应该是数组的输出。

我需要获得所有最终值输出,如

TV
Mobile
  Sumsung
Means
  Tshirt

这是我的 JSON 对象:

var cat = {
  categoryList: [
    {
      _id: "60efd92451be2c18d82f4b2a",
      name: "TV",
      slug: "TV",
      children: [],
    },
    {
      _id: "60f018cf12ea421c403ef801",
      name: "Mobile",
      slug: "Mobile",
      children: [
        {
          _id: "60f036fb2201d117c84d9667",
          name: "Sumsung",
          slug: "Sumsung",
          parentId: "60f018cf12ea421c403ef801",
          children: [],
        },
      ],
    },
    {
      _id: "60f01da22201d117c84d9665",
      name: "Means",
      slug: "Means",
      children: [
        {
          _id: "60f035af2201d117c84d9666",
          name: "Tshirt",
          slug: "Tshirt",
          parentId: "60f01da22201d117c84d9665",
          children: [],
        },
      ],
    },
  ],
};

3 个答案:

答案 0 :(得分:0)

如果您在打印到控制台时需要为子类别设置任何花哨的格式,请告诉我。

var cat = {
  categoryList: [{
      _id: "60efd92451be2c18d82f4b2a",
      name: "TV",
      slug: "TV",
      children: [],
    },
    {
      _id: "60f018cf12ea421c403ef801",
      name: "Mobile",
      slug: "Mobile",
      children: [{
        _id: "60f036fb2201d117c84d9667",
        name: "Sumsung",
        slug: "Sumsung",
        parentId: "60f018cf12ea421c403ef801",
        children: [],
      }, ],
    },
    {
      _id: "60f01da22201d117c84d9665",
      name: "Means",
      slug: "Means",
      children: [{
        _id: "60f035af2201d117c84d9666",
        name: "Tshirt",
        slug: "Tshirt",
        parentId: "60f01da22201d117c84d9665",
        children: [],
      }, ],
    },
  ],
};


function printCategory(categories) {
  for (category of categories) {
    console.log(category.name);
    if (category.children) printCategory(category.children);
  }
}

printCategory(cat.categoryList);

答案 1 :(得分:0)

我编写了这个递归函数,它接受 cat 对象并返回一个包含所有类别的数组。

function categoryExtractor(obj) {
  const allCategories: string[] = [];

  (function extractor(arr) {
    for (let i = 0; i < arr.length; i++) {
      allCategories.push(arr[i].name);
      if (arr[i].children) extractor(arr[i].children);
    }
  })(obj.categoryList);

  return allCategories;
}

console.log(categoryExtractor(cat));

答案 2 :(得分:-2)

您可以使用Array#reduce

var cat = {
  "categoryList": [{
      "_id": "60efd92451be2c18d82f4b2a",
      "name": "TV",
      "slug": "TV",
      "children": []
    },
    {
      "_id": "60f018cf12ea421c403ef801",
      "name": "Mobile",
      "slug": "Mobile",
      "children": [{
        "_id": "60f036fb2201d117c84d9667",
        "name": "Sumsung",
        "slug": "Sumsung",
        "parentId": "60f018cf12ea421c403ef801",
        "children": []
      }]
    },
    {
      "_id": "60f01da22201d117c84d9665",
      "name": "Means",
      "slug": "Means",
      "children": [{
        "_id": "60f035af2201d117c84d9666",
        "name": "Tshirt",
        "slug": "Tshirt",
        "parentId": "60f01da22201d117c84d9665",
        "children": []
      }]
    }
  ]
};
const values = cat.categoryList.reduce((a, e) => a.concat([e.name, e.children.map(e => e.name)]).flat(), []);
console.log(values);