This is the sixth day of my participation in Gwen Challenge

1. Transform the parent-child relationship data (one-dimensional array) into tree structure data

1.1 Original Data

var source = [
  {
    id: 1.pid: 0.name: Jiangsu Province}, {id: 2.pid: 1.name: Nanjing City}, {id: 7.pid: 0.name: 'Shanghai'
  }, {
    id: 3.pid: 2.name: Gulou District}, {id: 6.pid: 5.name: 'Wuhan'}, {id: 4.pid: 2.name: 'Basalt'}, {id: 5.pid: 0.name: 'Hubei Province' 	
  }]
Copy the code

1.2 js code

function toTree(data) {
  	let result = [];
	if (!Array.isArray(data)) {
		return result;
	}
	data.forEach(item= > {
		delete item.children;
	});
	let map = {};
	data.forEach(item= > {
		map[item.id] = item; // Map object whose id is the key and each item of the original data is the value
	});
	data.forEach(item= > {
		let parent = map[item.pid]; // If the PID of item is the same as the key of the Map object, item is the parent node
		let label = "";
		item.label = item.name;
		if (parent) {
		  (parent.children || (parent.children = [])).push(item);
		    parent.children.forEach(_item= > {
		      _item.label = _item.name; 
		    });
		} else{ result.push(item); }});console.log(result)
	return result;
}
toTree(source);
Copy the code

1.3 Conversion Effect Reference Article

2. The tree structure data is converted into a one-dimensional array

2.1 Original Data

const treeObj = {
  id: '0'.name: 'China'.children:[
    {
      id: '1'.name:'Hubei Province'.children:[
        {
          id: 1-1 ' '.name:'Wuhan'.children:[
            {
              id: '1-1-1'.name:'Wuchang district',},]},]}, {id: '2'.name:Jiangsu Province.children:[
        {
          id: '2-1'.name:Nanjing City.children:[
            {
              id: '2-1-1'.name:'Basalt',}]}, {id: '2-2'.name:'Zhenjiang'.children:[
            {
              id: '2-2-1'.name:Jurong City.children: [{id: '2-2-1'.name:Xiashu Town,},]}, {id: '2-2-2'.name:'Jingkou'},]},]}, {id: '3'.name:'Zhejiang',}};Copy the code

2.2 js code

// Put all the objects in treeObj into an array. If one object is children of another object, its parent_id is the id of the corresponding other object
// The principle is actually breadth-first traversal in data structures

function tree2Array(treeObj, rootid) {
   const temp = [];  // Set a temporary array to hold queues
   const out = [];    // Set the output array to store the one-dimensional array to be output
   temp.push(treeObj);
   // First place the root element in out
   let pid = rootid;
   const obj = deepCopy(treeObj);
   obj.pid = pid;
   delete obj['children'];
   out.push(obj)
   // Perform breadth-first traversal of the tree object
   while(temp.length > 0) {
       const first = temp.shift();
       const children = first.children;
       if(children && children.length > 0) {
           pid = first.id;
           const len = first.children.length;
           for(let i=0; i<len; i++) { temp.push(children[i]);const obj = deepCopy(children[i]);
               obj.pid = pid;
               delete obj['children'];
               out.push(obj)
           }
       } 
   }
   return out
}

console.log(tree2Array(treeObj, 'root'))
/ / copy
function deepCopy(obj){
    // Deep copy array
    if(Object.prototype.toString.call(obj) === "[object Array]") {const object=[];
      for(let i=0; i<obj.length; i++){ object.push(deepCopy(obj[i])) }return object
    }
    // Deeply copy objects
    if(Object.prototype.toString.call(obj) === "[object Object]") {const object={};
      for(let p in obj){
        object[p]=obj[p]
      }   
      return object
    }
}
Copy the code

2.3 Conversion Effect