Convert vue array to tree structure

Vue is a popular front-end framework in which many operations are based on arrays. When we need to display complex tree structure data in Vue, we need to convert the array into tree structure data to facilitate our display and operation on the page. This article will introduce the implementation method of converting Vue array into tree structure.

1. Determine the data structure

Before performing the conversion, we need to first determine the data structure we want to convert. This article takes the following data structure as an example:

let dataArray = [
  { id: 1, name: 'parent1', parentId: 0 },
  { id: 2, name: 'parent2', parentId: 0 },
  { id: 3, name: 'child1', parentId: 1 },
  { id: 4, name: 'child2', parentId: 1 },
  { id: 5, name: 'child3', parentId: 2 },
  { id: 6, name: 'grandchild1', parentId: 3 },
  { id: 7, name: 'grandchild2', parentId: 3 }
];

Each element contains an id, name and the id of its parent element. This data structure can be used to represent a tree structure with a parent-child relationship.

2. Implementing the conversion method

Next, we need to implement a conversion method. According to our data structure, we can define a node class:

class Node{
  constructor(data){
    this.id = data.id;
    this.name = data.name;
    this.parentId = data.parentId;
    this.children = [];
  }
}

Among them, id, name, and parentId represent the id, name, and id of the parent node of the node, and children represent the collection of child nodes under the node.

Next, we create the root node based on the original array:

function buildTree(dataArray) {
  let root = new Node({ id: 0, name: 'root', parentId: null });
  
  // 循环处理每个节点
  for(let i=0;i<dataArray.length;i++){
      let data = dataArray[i];
      let node = new Node(data);
  
      // 添加到父节点下
      let parent = findNode(root, data.parentId);
      parent.children.push(node);
  }
  return root.children;
}

// 根据id查找节点
function findNode(node, targetId) {
  if (node.id === targetId) {
      return node;
  } else {
      for (let i = 0; i < node.children.length; i++) {
          let result = findNode(node.children[i], targetId);
          if (result !== null) {
              return result;
          }
      }
      return null;
  }
}

In the buildTree method, we first create a root node, then we loop through the dataArray, create each node, and It is added to the children property of its parent node.

The findNode method is used to find the node with the specified id. When we encounter the node while looping, we add it to the children attribute of its parent node.

3. Test results

We can now test our method:

let treeData = buildTree(dataArray);

console.log(JSON.stringify(treeData));

The output results are as follows:

[
  {
    "id": 1,
    "name": "parent1",
    "parentId": 0,
    "children": [
      {
        "id": 3,
        "name": "child1",
        "parentId": 1,
        "children": [
          {
            "id": 6,
            "name": "grandchild1",
            "parentId": 3,
            "children": []
          },
          {
            "id": 7,
            "name": "grandchild2",
            "parentId": 3,
            "children": []
          }
        ]
      },
      {
        "id": 4,
        "name": "child2",
        "parentId": 1,
        "children": []
      }
    ]
  },
  {
    "id": 2,
    "name": "parent2",
    "parentId": 0,
    "children": [
      {
        "id": 5,
        "name": "child3",
        "parentId": 2,
        "children": []
      }
    ]
  }
]

We can see At this point, we successfully converted the original array into tree-structured data.

4. Summary

In Vue, many operations are inseparable from arrays. When we need to display complex tree structure data, we can convert the array into a tree Structured data. This article introduces the implementation method of converting a Vue array into a tree structure. First, the data structure is determined, then the conversion method is implemented, and finally we test it and get the correct result. You can use this method to convert your Vue array data for easy display and operation on the page.

The above is the detailed content of Convert vue array to tree structure. For more information, please follow other related articles on the PHP Chinese website!