的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转换对象的数组，树

回答

相关问题