Làm thế nào để chia javascript mảng các đối tượng với điều kiện cụ thể sử dụng lodash/underscorejs

Question

Tôi có mảng các đối tượng như thế này:

var data = [ 
{ 
    type : "parent", 
    name : "A" 
}, 
{ 
    type : "child", 
    name : "1" 
}, 
{ 
    type : "child", 
    name : "2" 
}, 
{ 
    type : "parent", 
    name : "B" 
}, 
{ 
    type : "child", 
    name : "3" 
} 
] 

và tôi muốn di chuyển đối tượng trẻ em vào các đối tượng phụ huynh, tách ra bởi các đối tượng parrent (có không có khóa nào được đưa ra từ đối tượng con là thuộc về đối tượng nào). Vì vậy, nó chỉ tách biệt bởi đối tượng cha. Để đơn giản, tôi muốn thay đổi mảng thành:

[ 
    { 
    type : "parent", 
    name : "A", 
    child: [ 
     { 
      type : "child", 
      name : "1" 
     }, 
     { 
      type : "child", 
      name : "2" 
     } 
    ] 
    }, 
    { 
    type : "parent", 
    name : "B", 
    child: [ 
     { 
      type : "child", 
      name : "3" 
     } 
     ] 
    } 
] 

Tôi đã đọc lodash về chunk nhưng không sử dụng.

Answer 1

Bạn có thể sử dụng một trong hai nguồn gốc Array.prototype.reduce chức năng hoặc lodash của reduce:

var data = [ 
{ 
    type : "parent", 
    name : "A" 
}, 
{ 
    type : "child", 
    name : "1" 
}, 
{ 
    type : "child", 
    name : "2" 
}, 
{ 
    type : "parent", 
    name : "B" 
}, 
{ 
    type : "child", 
    name : "3" 
} 
]; 

// If using _.reduce then use: 
// var newData = _.reduce(data, function(arr, el) {...}, []); 
var newData = data.reduce(function(arr, el) { 
    if (el.type === 'parent') { 
    // If el is pushed directly it would be a reference 
    // from the original data object 
    arr.push({type: el.type, name: el.name, child: []}); 
    } 
    else { 
    arr[arr.length - 1].child.push({type: el.type, name: el.name}); 
    } 

    return arr; 
}, []); 

Answer 2

Plain phiên bản javascript:

var newArr = []; 
var j=0; 
var k=0; 
for (var i = 0; i <data.length; i++) { 
    if(data[i].type == 'parent'){ 
     newArr[j] = data[i]; 
     newArr[j].children = []; 
     j++; 
     k=0; 
    } 
    else { 
     data[i].name = newArr[j-1].name.toLowerCase() + String.fromCharCode(k + 97) 
     newArr[j-1].children[k] =data[i]; 
     k++; 
    } 
} 
console.log(newArr) 

Tôi giả định ở đây là phụ huynh là luôn đặt trước mặt con cái, theo quy định trong dữ liệu ví dụ của bạn.

Ngoài ra, sẽ tốt nếu bạn có thể ngăn cha mẹ có 26 con trở lên. Điều này sẽ gây ra String.fromCharCode(k + 97) để in các ký tự lạ. Để làm điều này, hãy xem http://www.asciitable.com/

Answer 3

Đây là giải pháp lodash có thể dễ hiểu hơn một chút. CodePen

Một vài lưu ý:

• này sẽ thay đổi các đối tượng dữ liệu đến - nếu đó là một vấn đề chúng ta có thể quăng trong một số _.clone() cuộc gọi.
• này sẽ chỉ làm việc nếu mỗi phụ huynh có 26 hoặc ít hơn trẻ em, vì mô hình name: "ab" bạn chọn

var lastParent; 
var result = _.chain(data) 
    .groupBy(function (item) { 
    if (item.type === 'parent') lastParent = item.name 
    return lastParent 
    }) 
    .map(function (group) { 
    var parent = _.first(group) 
    parent.child = _.chain(group) 
     .slice(1) 
     .map(function (child, index) { 
     child.name = parent.name.toLowerCase() + String.fromCharCode(index + 97) 
     return child 
     }) 
     .value() 
    return parent 
    }) 
    .value() 

console.log(result) 

Answer 4

for (ele in data) 
{ 
    if (!data[ele].hasOwnProperty('child') && data[ele].type=='parent') 
    { 
     data[ele].child = []; 
     while(data[parseInt(ele) + 1] && data[parseInt(ele) + 1].type == 'child') 
     { 
      data[ele].child.push({type: data[parseInt(ele) + 1].type, name:data[parseInt(ele) + 1].name}); 
      data.splice(parseInt(ele) + 1, 1); 
     } 
    } 
} 
console.log(data); 

Answer 5

Thử vòng lặp đơn giản:

var current, parent, result = [], i = 0; 

while(current = data[i++]){ 

    if(current.type === "parent"){ 
     current.child = []; 
     result.push(current); 
     parent = current 
    }else{ 
     current.name = (parent.name + String.fromCharCode(parent.child.length + 97)).toLowerCase(); 
     parent.child.push(current) 
    } 

} 

Demo