![](/img/trans.png)
[英]Javascript flatten deeply nested Array with objects and renaming properties
[英]Flatten nested array of objects, renaming keys to an iterator
我有一个对象数组,每个对象如下所示(轮询响应):
{
"slug": "18-AZ-Gov-GE-DvF",
"name": "2018 Arizona Gubernatorial GE",
"tags": [],
"charts": [],
"election_date": "2018-11-06",
"n_polls": 1,
"created_at": "2017-06-13T13:32:26.000Z",
"responses": [
{
"label": "Ducey",
"name": "Doug Ducey",
"party": "Republican",
"incumbent": true
},
{
"label": "Farley",
"name": "Steve Farley",
"party": "Democrat",
"incumbent": false
},
{
"label": "Other",
"name": "Other",
"party": null,
"incumbent": false
},
{
"label": "Undecided",
"name": "Undecided",
"party": null,
"incumbent": false
}
]
},
我需要展平由responses
键访问的数组,以便将每个对象键接到其迭代器。
最终对象应如下所示:
{
"slug": "18-AZ-Gov-GE-DvF",
"name": "2018 Arizona Gubernatorial GE",
"tags": [],
"charts": [],
"election_date": "2018-11-06",
"n_polls": 1,
"created_at": "2017-06-13T13:32:26.000Z",
"label1": "Ducey",
"name1": "Doug Ducey",
"party1": "Republican",
"incumbent1": true
"label2": "Farley",
"name2": "Steve Farley",
"party2": "Democrat",
"incumbent2": false
"label3": "Other",
"name3": "Other",
"party3": null,
"incumbent3": false
"label4": "Undecided",
"name4": "Undecided",
"party4": null,
"incumbent4": false
},
我尝试了几种解决方案,但想在真正开始之前先看看是否有一种简便的es6方法。
在这里使用array .reduce
方法可能效果很好。 由于reduce
回调将接收当前索引作为第三个参数,因此您可以使用该索引创建所需的键。
例:
const myArray = [ { "label": "Ducey", "name": "Doug Ducey", "party": "Republican", "incumbent": true }, { "label": "Farley", "name": "Steve Farley", "party": "Democrat", "incumbent": false }, { "label": "Other", "name": "Other", "party": null, "incumbent": false }, { "label": "Undecided", "name": "Undecided", "party": null, "incumbent": false } ] const flattened = myArray.reduce((flat, item, index) => ({ ...flat, ...Object.keys(item).reduce((numbered, key) => ({ ...numbered, [key + (index+1)]: item[key], }), {}), }), {}); console.log(flattened);
您可以使用forEach
遍历responses
数组,并在对象上为每个对象中的entries
分配一个新键。 之后,只需delete
原始responses
数组即可:
let obj = {"slug": "18-AZ-Gov-GE-DvF","name": "2018 Arizona Gubernatorial GE","tags": [],"charts": [],"election_date": "2018-11-06","n_polls": 1,"created_at": "2017-06-13T13:32:26.000Z","responses": [ { "label": "Ducey", "name": "Doug Ducey", "party": "Republican", "incumbent": true }, { "label": "Farley", "name": "Steve Farley", "party": "Democrat", "incumbent": false }, { "label": "Other", "name": "Other", "party": null, "incumbent": false }, { "label": "Undecided", "name": "Undecided", "party": null, "incumbent": false }]} obj.responses.forEach((item, i) => { // item is one object from responses // i is the index starting at 0. Concat that on the key Object.entries(item).forEach(([k, v]) => obj[k+(i+1)] = v) }) // no need for obj.responses any more delete obj.responses console.log(obj)
一种方法是使用一些较新的功能,包括spread
, destructuring assignment
, template literals
, entries
以及最重要的是reduce
。
主要要点是使用化简器将responses
数组转换为每个元素对象的新对象,并使用辅助化简器用迭代器计数修改键,并使用新键将值分配给外部对象。
这种方法的主要好处是原始对象(包括其子对象)没有被修改(请阅读:无副作用)。
const flattened = responses.reduce((o, g, i) => {
Object.entries(g).reduce((t, [k, v]) => {
t[`${k}${i + 1}`] = v;
return t;
}, o);
return o;
},
{});
完整的工作示例:
const orig = { "slug": "18-AZ-Gov-GE-DvF", "name": "2018 Arizona Gubernatorial GE", "tags": [], "charts": [], "election_date": "2018-11-06", "n_polls": 1, "created_at": "2017-06-13T13:32:26.000Z", "responses": [{ "label": "Ducey", "name": "Doug Ducey", "party": "Republican", "incumbent": true }, { "label": "Farley", "name": "Steve Farley", "party": "Democrat", "incumbent": false }, { "label": "Other", "name": "Other", "party": null, "incumbent": false }, { "label": "Undecided", "name": "Undecided", "party": null, "incumbent": false } ] }; const {responses, ...foo} = orig; const flattened = responses.reduce((o, g, i) => { Object.entries(g).reduce((t, [k, v]) => { t[`${k}${i + 1}`] = v; return t; }, o); return o; }, {}); console.log({flattened: {...foo, ...flattened}}); console.log({orig});
您可以分解响应和其他数据,然后使用索引键将每个响应减少到一个对象,然后通过对象散布运算符组合结果:
const { responses, ...other } = data
const indexedResponses = responses.reduce((acc, r, i) => {
Object.entries(r).forEach(([key, value]) => {
acc[`${key}${i + 1}`] = value
})
return acc
}, {})
const result = { ...other, ...indexedResponses }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.