Javascript 如何基于数组显示类别子类别

我有一个由一些数据组成的数组来显示类别和子类别

{id: "5", parent_id: "0", lable: "Movie"}
{id: "20", parent_id: "5", lable: "Action"}
{id: "15", parent_id: "43", lable: "J.K Rowling"}
{id: "43", parent_id: "0", lable: "Book"}
{id: "20", parent_id: "2", lable: "James Bond Series"}
{id: "3", parent_id: "0", lable: "Music"}
{id: "39", parent_id: "15", lable: "Harry Potter Series"}

我想对这些数据进行排序并显示如下内容：

> Movie
>> Action  
>>>James Bond Series

>Book
>>J.K Rowling
>>>Harry Potter Series

---

只需对每个类别和子类别使用如下过滤功能：

var arr=[{id:“5”，父id:“0”，标签：“Movie”}，
{id:“20”，家长id:“5”，标签：“行动”}，
{id:“15”，家长id:“43”，标签：“J.K罗琳”}，
{id:“43”，家长id:“0”，标签：“Book”}，
{id:“20”，家长id:“2”，标签：“詹姆斯·邦德系列”}，
{id:“3”，家长id:“0”，标签：“音乐”}，
{id:“39”，家长id:“15”，标签：“哈利波特系列”}；
函数isParent（元素、索引、数组）{
返回（element.parent_id==“0”）；
}
let filtered=arr.filter（isParent）；
console.log（过滤）对于一般解决方案，您可以获取数据并实现一个轻型树类，其中每个节点都有一个值和节点的子节点列表。然后，您可以创建一个迭代器或类似的函数来执行树的深度优先遍历。它可以返回深度信息，允许您使用适当的缩进打印值


let data=[{id:“5”、家长id:“0”、标签：“电影”}、{id:“20”、家长id:“5”、标签：“动作”}、{id:“15”、家长id:“43”、标签：“J.K罗琳”}、{id:“43”、家长id:“0”、标签：“书”}、{id:“2”、家长id:“20”、标签：“詹姆斯·邦德系列”}、{id:“3”、家长id:“0”、标签：“音乐”}、{id:“39”、家长id:“15”、标签：“哈利·波特系列”}]
类节点{
构造函数（id、值）{
this.id=id
this.value=value
this.children=[]
}
*getTree（depth=0）{//产生自身和chidlren的迭代器
屈服[这个值，深度]
为了（让这个孩子，孩子们）{
yield*child.getTree（深度+1）
}
}
}
//使用辅助对象创建节点以跟踪ID
//在尝试推送子项之前，请确保父项存在（即使没有信息）
让tree=data.reduce（（tree，{id，parent_id，lable}）=>{
如果（树[id]==未定义）树[id]=新节点（id，标签）
赋值（树[id]，{id，值：lable}）
if（tree[parent\u id]==未定义）tree[parent\u id]=新节点（）
树[parent\u id].子目录.push（树[id]）
回归树
}，{0:新节点（0，“根”）}）
//树的根位于id 0处
设根=树[0]
//现在使用布局的深度来迭代子对象
for（让root.getTree（）的[node，depth]{
console.log（“>”。重复（深度），节点）
}
//从其他节点开始仅显示电影：
console.log（“------------电影----------------”）
让我们开始=树[5]
for（让start.getTree（）的[节点，深度]）{
console.log（“>”。重复（深度），节点）
}
您需要数据的树表示，因为您的数据是一个自引用表。因此，您需要编写一段代码，将平面结构转换为树。例如，可以使用以下代码执行此操作：

const makeTree = (array, id, parentId, parentValue) =>
  array
    .filter(node => {
      return node[parentId] === parentValue;
    })
    .map(node => {
      node["items"] = makeTree(array, id, parentId, node[id]);
      return node;
    });

其中，
array
是源数组，
id
-id字段的名称，
parentId
-保存父id的字段的名称，
parentValue
-根节点id

您可以按如下方式调用此函数，以从数组生成树：

const tree = makeTree(array, "id", "parent_id", "0");

其中
array
是源数组：

const array = [
  { id: "5", parent_id: "0", lable: "Movie" },
  { id: "20", parent_id: "5", lable: "Action" },
  { id: "15", parent_id: "43", lable: "J.K Rowling" },
  { id: "43", parent_id: "0", lable: "Book" },
  { id: "2", parent_id: "20", lable: "James Bond Series" },
  { id: "3", parent_id: "0", lable: "Music" },
  { id: "39", parent_id: "15", lable: "Harry Potter Series" }
];

结果数组元素将包含作为子节点数组的
项
字段

在此之后，您可以创建一个递归函数，该函数将使用jQuery呈现此树。例如：

const renderLevel = items => {
  return $("<ul>").append(
    items.map(item =>
      $("<li>")
        .html(item.lable)
        .append(renderLevel(item.items))
    )
  );
};

这是一个很好的例子


const数组=[
{id:“5”，家长id:“0”，标签：“电影”}，
{id:“20”，家长id:“5”，标签：“行动”}，
{id:“15”，家长id:“43”，标签：“J.K罗琳”}，
{id:“43”，家长id:“0”，标签：“Book”}，
{id:“2”，家长id:“20”，标签：“詹姆斯·邦德系列”}，
{id:“3”，家长id:“0”，标签：“音乐”}，
{id:“39”，家长id:“15”，标签：“哈利波特系列”}
];
const makeTree=（数组、id、parentId、parentValue）=>
排列
.filter（节点=>{
返回节点[parentId]==parentValue；
})
.map（节点=>{
节点[“项”]=makeTree（数组、id、parentId、节点[id]）；
返回节点；
});
consttree=makeTree（数组，“id”，“parent_id”，“0”）；
log（JSON.stringify（tree））
const renderLevel=项目=>{
返回$（“
”）。追加(
items.map（item=>
$（“
”）
.html（item.lable）
.append（renderLevel（item.items））
)
);
};
$(() => {
$（“body”）.append（renderLevel（tree））；
});
这可以通过递归方法实现


const arr=[{id:“5”，父id:“0”，标签：“Movie”}，
{id:“20”，家长id:“5”，标签：“行动”}，
{id:“15”，家长id:“43”，标签：“J.K罗琳”}，
{id:“43”，家长id:“0”，标签：“Book”}，
{id:“20”，家长id:“2”，标签：“詹姆斯·邦德系列”}，
{id:“3”，家长id:“0”，标签：“音乐”}，
{id:“39”，家长id:“15”，标签：“哈利波特系列”}；
常量呈现=（arr，id）=>{
const div=document.createElement（'div'）；
const span=document.createElement（'span'）；
span.innerText=arr.find（e=>e.id==id）.lable；
子类（span）；
arr.filter（e=>e.parent_id==id）.forEach（sub=>{
子类（渲染（arr，子类id））；
});
返回div；
}
arr.filter（e=>e.parent_id==“0”）.forEach（main=>document.querySelector（'div'）.appendChild（render（arr，main.id））
div{
左边距：5px；
}
首先获取树，然后获取平面表示


函数getTree（数组，根）{
var o={}；
array.forEach（有效负载=>{
赋值（o[payload.id]=o[payload.id]|{}，{payload}）；
o[payload.parent_id]=o[payload.parent_id]|{}；
o[payload.parent_id]。children=o[payload.parent_id]。children | |[]；
o[payload.parent_id].children.push（o[payload.id]）；
});
返回o[root]。子对象；
}
函数getFlat（数组=[]））{
return array.reduce（（r，{payload，children}）=>
r、 concat（有效载荷，getFlat（子级）），[]）
$(() => {
  $("body").append(renderLevel(tree));
});