将属性从一个对象的名称拖入不同的对象

Question

我正在VueJS中做一个项目，并且我有一个数据数组，它由若干对象组成。

这些对象是从PHP后端拉，像

ID由值：2123 名称： “名称值” 状态： “活动” ACCOUNT_ID： “2KGGALS2353255”

想象一下，我想这些由按键名称拆分成类似数组，但我想有一个包含两个孩子的父对象对象

[ 
    0: { 
    core: { 
     id: 2123 
     name: "Name Value" 
    }, 
    extra: { 
     status: "active", 
     account_id: "2KGGALS2353255" 
    } 
] 

的问题是，我怎么能做到这一点的Wi th Javascript？我真的不想在PHP中事先修改数据，除非在Javascript中这样做非常麻烦。 我可以使用VueJS和Lodash。

Answer 1

我一直在寻找lodash的pick()方法。

https://lodash.com/docs/4.17.4#pick

Answer 2

这应该为你的目的

function separate(obj, keys) { 
 
    let target = {}, rest = {}; 
 
    Object.keys(obj).forEach(function(key) { 
 
    if (keys.includes(key)) { 
 
     target[key] = obj[key]; 
 
    } else { 
 
     rest[key] = obj[key]; 
 
    } 
 
    }); 
 
    return { target: target, rest: rest }; 
 
} 
 

 
let stuff = { 
 
    id: 2123, 
 
    name: "Name Value", 
 
    status: "active", 
 
    account_id: "2KGGALS2353255" 
 
}; 
 

 
let separated = separate(stuff, ['id', 'name']); 
 

 
console.log({ 
 
    core: separated.target, 
 
    extra: separated.rest 
 
});

Answer 3

工作中使用ES6的object destructuring和object rest spread建议，这需要一个babel transform，可以在阵列Array#map成新所需格式的对象数组：

const arr = [{"id":1,"name":"Name1","status":"active","account_id":"2KGGALS2353255"},{"id":2,"name":"Name2","status":"active","account_id":"4ABCLS2353255"},{"id":3,"name":"Name3","status":"active","account_id":"6LMNALS2353255"}]; 
 

 
const result = arr.map(({ id, name, ...extra }) => ({ 
 
    core: { 
 
    id, 
 
    name 
 
    }, 
 
    extra 
 
})); 
 

 
console.log(result);

可以使用lodash的_.pick()到得到核心做同样的事情，并_.omit()得到额外：

var arr = [{"id":1,"name":"Name1","status":"active","account_id":"2KGGALS2353255"},{"id":2,"name":"Name2","status":"active","account_id":"4ABCLS2353255"},{"id":3,"name":"Name3","status":"active","account_id":"6LMNALS2353255"}]; 
 

 
var result = arr.map(function(obj) { 
 
    return { 
 
    core: _.pick(obj, ['id', 'name']), 
 
    extra: _.omit(obj, ['id', 'name']) 
 
    }; 
 
}); 
 

 
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>