的Javascript轉換對象的數組，樹

我想這種結構轉換：的Javascript轉換對象的數組，樹

var initial = [ 
{ Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, 
{ Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }, 
{ Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" }, 
{ Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" }, 
{ Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" }, 
{ Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" }, 
{ Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" }, 
{ Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" } 
];

這一個：

var example = { 
"Phase 1": { 
    "Step 1": { 
     "Task 1": { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, 
     "Task 2": { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" } 
    } , 
    "Step 2": { 
     "Task 1": { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" }, 
     "Task 2": { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" } 
    } 
} , 
"Phase 2": {   
    "Step 1": { 
     "Task 1": { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" }, 
     "Task 2": { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" }, 
    } , 
    "Step 2": { 
     "Task 1": { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" }, 
     "Task 2": { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" }  
    } 
} 
};

，所以我可以很容易地提取這樣example['Phase 2']['Step 1']['Task 1']['Value']

值我做了使用groupBy功能像這樣的第一步：

function groupBy(d, arr) { 
return arr.reduce(function(acc, i) { 
    var p = i[d]; 
    var temp = acc[p] || []; 
    temp.push(i); 
    acc[p] = temp; 
    return acc; 
}, {}) 
}

所以當我做var groupedByPhase = groupBy('Phase', initial); 我得到groupedByPhase：

{ 
"Phase 1" : [ 
{ Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, 
{ Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }, 
{ Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" }, 
{ Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" }, 
], 
"Phase 2": [ 
{ Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" }, 
{ Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" }, 
{ Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" }, 
{ Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" } 
] 
}

我也通過步驟使用此功能管理到組：

function groupByInNestedObj(item, obj) { 
var x = {}; 
for (var i in obj) { 
    x[i] = groupBy(item, obj[i]); 
} 
return x; 
}

使得到調用groupByInNestedObj('Step', groupBy('Phase', initial))

時

{ 
"Phase 1" : { 
    "Step 1": [ 
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, 
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }], 
    "Step 2": [ 
    { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" }, 
    { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" }, 
    ]}, 
"Phase 2": { 
    "Step 1:" [ 
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" }, 
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" }], 
    "Step 2:"[ 
    { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" }, 
    { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" } 
    ]} 
}

但是我有點st在這裏，做下一個。理想情況下，我想能夠做到groupBy("Task", groupBy("Step", groupBy("Phase", initial)))，讓groupBy組在樹的最深層次。任何建議歡迎！

注：我曾嘗試的第二步來實現此功能

function groupByInNestedObj2 (item, obj) { 
    var x = {}; 
    for(var i in obj) { 
     for (var j in obj[i]) { 
      x[i][j] = groupBy(item, obj[i][j]); 
     } 
    } 
    return x; 
}

，但它似乎並沒有工作。

注2：以前的功能工作的第二個版本，但不是純粹的，因爲它修改通過它

function groupByInNestedObj2 (item, obj) { 
    var x = {}; 
    for(var i in obj) { 
     x[i] = obj[i] 
     for (var j in x[i]) { 
      x[i][j] = groupBy('Task', x[i][j]); 
     } 
    } 
    return x; 
}

所以當我做var groupByPhaseAndStepAndTask = groupByInNestedObj2('Task', groupByPhaseAndStep) groupByPhaseAndStep被修改過傳遞的對象，這是不期望副作用。仍在努力。

來源

2016-01-20 Bondifrench

一個更通用的方法：

var initial = [ 
 
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, 
 
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }, 
 
    { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" }, 
 
    { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" }, 
 
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" }, 
 
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" }, 
 
    { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" }, 
 
    { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" } 
 
]; 
 

 
_.mixin({ 
 
    groupByMulti: function(obj, values, context) { 
 
    if (!values.length) return obj; 
 
    var byFirst = _.groupBy(obj, _.head(values), context); 
 
    for (var prop in byFirst) { 
 
     byFirst[prop] = _.groupByMulti(byFirst[prop], _.tail(values), context); 
 
    } 
 
    return byFirst; 
 
    } 
 
}); 
 

 
var tree = _(initial).groupByMulti(['Phase', 'Step', 'Task']); 
 
$('#pre').append(JSON.stringify(tree, null, 3));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.0/lodash.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<pre id='pre'></pre>

來源

2016-01-20 10:45:43 Shanoor

它非常接近理想的結果，在任務內部是對象而不是數組，但是這樣可以。雖然我用lodash做了一些事情，但我對_.mixin不太熟悉，所以答案中有太多的魔力。此外，我的目標是實現功能的組合，所以我可以做一些類似於groupBy（「Task」，groupBy（「Step」，groupBy（「Phase」，initial）））' – Bondifrench

好吧我設法通過重構你的例子，使用簡單的head，tail和groupBy函數，我喜歡使用遞歸，現在只需要修改它，所以當array.length == 1時，我得到的對象並不是一個具有單個元素的數組 – Bondifrench

您可以嘗試使用.reduce，只是檢查對象存在與否，這樣

var initial = [ 
 
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, 
 
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }, 
 
    { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" }, 
 
    { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" }, 
 
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" }, 
 
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" }, 
 
    { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" }, 
 
    { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" } 
 
]; 
 

 
var result = initial.reduce(function (prev, current) { 
 
    prev[current.Phase] = prev[current.Phase] || {}; 
 
    prev[current.Phase][current.Step] = prev[current.Phase][current.Step] || {}; 
 
    prev[current.Phase][current.Step][current.Task] = current; 
 
    return prev; 
 
}, {}); 
 

 
console.log(JSON.stringify(result, null, 2));

來源

2016-01-20 10:03:12

我們可以用一個做這種for循環：

var initial = [ 
 
{ Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, 
 
{ Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }, 
 
{ Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" }, 
 
{ Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" }, 
 
{ Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" }, 
 
{ Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" }, 
 
{ Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" }, 
 
{ Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" } 
 
]; 
 
var final = {} 
 
initial.forEach(function(d){ 
 
    if (!final[d.Phase]) //phase not present so make an object 
 
    \t final[d.Phase] = {}; 
 
    if (!final[d.Phase][d.Step]) //step not present so make an object 
 
    \t final[d.Phase][d.Step] = {}; 
 
    if (!final[d.Phase][d.Step][d.Task])//task not present so make an object and store the object 
 
    \t final[d.Phase][d.Step][d.Task] = d; 
 
    
 
}) 
 
console.log(final)

使用lodash這

來源

2016-01-20 10:19:19 Cyril

雖然它給出正確的結果，我想實現，對結果的頂部，是組成見我的'groupBy（「Task」，groupBy（「Step」，groupBy（「Phase」，initial）））'comment – Bondifrench

的Javascript轉換對象的數組，樹

回答

相關問題