ソートし、複雑なデータをJavaScriptで機能を比較

Question

は、このスレッドHow does sort function work in JavaScript, along with compare function

のおかげで動作しますが、私はそれは、次のような複雑なデータをどのように使用できるか疑問に思って：

私は次のデータを持っているとしましょう。

var data = [{ 
    id: _A2, 
    parent: { 
    parent_id: _A1 
    }, 
    createdOn: 1.1 
},{ 
    id:_A4, 
    parent: null , 
    createdOn: 1.1 
},{ 
    id: _A1, 
    parent: null , 
    createdOn: 1 
},{ 
    id: _A3, 
    parent: { 
    parent_id: _A1 
    }, 
    createdOn: 1.2 
},{ 
    id: _A5, 
    parent: { 
    parent_id: _A4 
    }, 
    createdOn: 1.2 
}] 

私たちを与える作成日で最初にそれを並べ替えて、両親とそのグループの子にしたい：

var data = [{ 
    id: _A1, 
    parent: null , 
    createdOn: 1 
},{ 
    id: _A2, 
    parent: { 
    parent_id: 1 
    }, 
    createdOn: 1.1 
},{ 
    id: _A3, 
    parent: { 
    parent_id: 1 
    }, 
    createdOn: 1.2 
},{ 
    id: _A4, 
    parent: null , 
    createdOn: 1.1 
},{ 
    id: _A5, 
    parent: { 
    parent_id: _A4 
    }, 
    createdOn: 1.2 
}] 

は、ソート機能を持つことも可能ですか？

Answer 1

同じポストの第二の答えはオブジェクトの配列内の特定のプロパティを比較についてかなりよく説明：たとえば

https://stackoverflow.com/a/6568093/4809052

、作成日付を比較したい場合は、あなたが

を行うことができます

var sortedArray = myArray.sort(function(a,b){ 
            return (a.createdOn - b.createdOn); 
           }); 

idで比較する場合は、文字列_A1の各文字を比較できます。

Answer 2

私はこれがあなたが求めていることを信じています。要するにあなたの質問に答えるために、ソートだけではそれを管理することはできません。

data.sort(function(rec1, rec2) { 
    return rec1.createdOn - rec2.createdOn; 
}); 

var grouped = []; 
data.forEach(function(record) { 
    if (!record.parent) { 
     grouped.push(record); 
     data.forEach(function(child) { 
      if (child.parent) { 
       if (child.parent.parent_id == record.id) grouped.push(child); 
      } 
     }); 
    } 
}); 

data = grouped; 

Answer 3

更新 ここで私は付属のソリューション：

var data = [{ 
 
    id: '_A2', 
 
    color: '#00ff00', 
 
    parent: { 
 
    parent_id: '_A1' 
 
    }, 
 
    created: 1.1 
 
}, { 
 
    id: '_A4', 
 
    color: '#bf1616', 
 
    parent: null, 
 
    created: 1.1 
 
}, { 
 
    id: '_A1', 
 
    parent: null, 
 
    color: '#469649', 
 
    created: 1 
 
}, { 
 
    id: '_A3', 
 
    color: '#00ff00', 
 
    parent: { 
 
    created: 1, 
 
    parent_id: '_A1' 
 
    }, 
 
    created: 1.2 
 
}, { 
 
    id: '_A5', 
 
    color: '#f62222', 
 
    parent: { 
 
    created: 1.1, 
 
    parent_id: '_A4' 
 
    }, 
 
    created: 1.2 
 
},{ 
 
    id: '_A6', 
 
    color: '#00ff00', 
 
    parent: { 
 
    created: 1, 
 
    parent_id: '_A1' 
 
    }, 
 
    created: 11 
 
},{ 
 
    id: '_A8', 
 
    color: 'yellow', 
 
    parent: { 
 
    created: 0.5, 
 
    parent_id: '_A1' 
 
    }, 
 
    created: 0.6 
 
},{ 
 
    id: '_A7', 
 
    color: '#c2c22b', 
 
    parent: null, 
 
    created: 0.5 
 
}], 
 
    ct = document.getElementById("unordered-data"), 
 
    result = document.getElementById("result"), 
 
    createRow = function (row) { 
 
     var child = document.createElement('div'); 
 
     child.innerHTML = '<span class="row" style="background-color:' + row['color'] + '">' + row['id'] + ' -- ' + row['created'] + '</span>'; 
 
     return child 
 

 
    }, 
 

 

 
    compareFn = function (lhs, rhs) { 
 
     return (lhs > rhs) ? 1 : (lhs < rhs ? -1 : 0); 
 
    }, 
 

 
    compareSelfOrParentCreated = function (record1, record2) { 
 
     var parent1 = record1.parent, 
 
      parent2 = record2.parent; 
 

 
     return compareFn(
 
     parent1 ? parent1.created : record1.created, 
 
     parent2 ? parent2.created : record2.created 
 
    ); 
 

 
    }, 
 
    compareSelfOrParentId = function (record1, record2) { 
 
     var parentId1 = record1.parent, 
 
      parentId2 = record2.parent; 
 
     return compareFn(!!parentId1 ? parentId1.id : record1.id, 
 
         !!parentId2 ? parentId2.id : record2.id); 
 
    }, 
 

 
    idPropertyOrEmptyString = function (obj) { 
 
     return (!!obj && !!obj.id) ? obj.id : ''; 
 
    }; 
 

 
for (row in data) { 
 
    ct.appendChild(createRow(data[row])); 
 
} 
 

 
for(r in data){ 
 
    data[r]._id = idPropertyOrEmptyString(data[r].parent); 
 
} 
 

 
data.sort(function(r1, r2){ 
 
    var cmpCreated = compareSelfOrParentCreated(r1, r2); 
 
    if(cmpCreated === 0){ 
 
    var cmpParent = compareSelfOrParentId(r1, r2); 
 
    if(cmpParent === 0){ 
 
     var parentAsc = compareFn(r1._id, r2._id); 
 
     if(parentAsc === 0){ 
 
     return compareFn(r1.created, r2.created); 
 
     } else{ 
 
     return parentAsc; 
 
     } 
 
    } else { 
 
     return cmpParent 
 
    } 
 
    } else{ 
 
    return cmpCreated; 
 
    } 
 
}); 
 

 
for (row in data) { 
 
    result.appendChild(createRow(data[row])); 
 
}

.row { 
 
    display:block; 
 
    width:200px; 
 
    padding:10px; 
 
}

<h2> 
 
Unordered data 
 
</h2> 
 
<div id="unordered-data"> 
 
</div> 
 

 
<h2> 
 
Result 
 
</h2> 
 

 
<div id="result"> 
 

 
</div>