Javascript - オブジェクトのコレクションの並べ替えを改善する

Question

オブジェクトの配列を取得しています。説明のために、私はプロパティを減らし、関連するものだけを残しました。 私はそれらのオブジェクトを並べ替える必要があり、新しい配列を作成する必要があります。 元の配列は未分類です。

オブジェクトは配列に含まれ、任意の数の子を持つことができます。また、子供は自分の子供を持つことができます。しかし、最終的にはすべてメインオブジェクトの子（parent_id：null）です。 //ソートされていない

let data = [ 
{ 
id: 1, 
name:'ParentAlpha', 
parent_id: null 
}, 
{ 
id: 2, 
name:'ParentBeta', 
parent_id: null 
}, 
{ 
id: 100, 
name:'ChildOneAlpha', 
parent_id: 1 
}, 
{ 
id: 101, 
name:'ChildTwoAlpha', 
parent_id: 1 
}, 
{ 
id: 102, 
name:'SubChildOneAlpha', 
parent_id: 100 
}, 
{ 
id: 103, 
name:'SubChildTwoAlpha', 
parent_id: 100 
}, 
{ 
id: 200, 
name:'ChildOneBeta', 
parent_id: 2 
}, 
{ 
id: 201, 
name:'ChildTwoBeta', 
parent_id: 2 
}] 

私は何を達成したいことは、この（同じ構造が、私はJSON構造をommitedている）です。

[{ParentAlpha...}, 
{ChildOneAlpha...}, 
{SubChildOneAlpha...}, 
{SubChildTwoAlpha...}, 
{ChildTwoAlpha...}, 
{ParentBeta...}, 
{ChildOneBeta...}, 
{ChildTwoBeta...}] 

私が働いてcodeを行っているが、私はそれが少し良く行うことができると思うし、私はより多くを学びたいと思っています。しかし、私はコードを見て、私はそれを改善する方法を説明できません。誰かがガイドを指すことができるなら、私は感謝します。

私のワーキングコード：

let processedProducts = [], 
    processedid = [], 
    rearangedProducts = []; 

     let subParentProducts = data.slice(); 
     let masterParentProducts = data.filter((product)=>{ 
      return product.parent_id === null 
     }); 
     masterParentProducts.forEach((productParent)=>{ 
      if(processedid.indexOf(productParent.id) === -1){ 
       processedid.push(productParent.id); 
       processedProducts.push(productParent); 
      } 
        data.forEach((product, index)=>{ 
         if (product.parent_id === productParent.id){ 
          processedProducts.push(product); 
          subParentProducts[index] = null; 
         } 
         if (product.id === productParent.id) { 
          subParentProducts[index] = null 
         } 
        }) 
     }); 

     subParentProducts = subParentProducts.filter(function(n){ return n !== null }); 
     processedProducts.forEach((prod)=>{ 
      rearangedProducts.push(prod); 
      let res = subParentProducts.filter((o)=> { 
       return o.parent_id === prod.id; 
      }); 
      if (res.length > 0){ 
       rearangedProducts.push(res[0]); 
      } 
     }); 
console.log(rearangedProducts) 

Answer 1

新しいソートされた配列を構築するために再帰を使用して関数を作成することができます。

let data = [{"id":1,"name":"ParentAlpha","parent_id":null},{"id":2,"name":"ParentBeta","parent_id":null},{"id":100,"name":"ChildOneAlpha","parent_id":1},{"id":101,"name":"ChildTwoAlpha","parent_id":1},{"id":102,"name":"SubChildOneAlpha","parent_id":100},{"id":103,"name":"SubChildTwoAlpha","parent_id":100},{"id":200,"name":"ChildOneBeta","parent_id":2},{"id":201,"name":"ChildTwoBeta","parent_id":2}] 
 

 
function sortArray(data, parent) { 
 
    return data.reduce(function(r, e) { 
 
    if (e.parent_id == parent) { 
 
     r.push(e) 
 
     var children = sortArray(data, e.id) 
 
     if (children.length) r = r.concat(children) 
 
    } 
 
    return r; 
 
    }, []) 
 
} 
 

 
console.log(sortArray(data, null))