用map重构一个对象for each

Question

我有一个对象，我试图映射到一个反应组件（使用lodash）。我回来从我的API（火力）的对象的当前形状看起来像这样...

// ex. 1 
{ 
    "-Kdkahgiencls0dnh": { 
    "name": "a name", 
    "desc": "a description", 
    "other": "some other guff" 
    }, 
    "-Ksdfadfvcls0dsnh": { 
    "name": "another name", 
    "desc": "another description", 
    "other": "some more" 
    }, 
    "-kgoandiencls0dnh": { 
    "name": "I am a name", 
    "desc": "I am a description", 
    "other": "I am some other guff" 
    } 
} 

...但是，我失去了主键，当我通过_.map()

运行我“M试图做的是让我的物体的形状：

// ex. 2 
[ 
    { 
    "id": "-Kdkahgiencls0dnh", 
    "name": "a name", 
    "desc": "a description", 
    "other": "some other guff" 
    }, 
    {... the next object ...}, 
    {... etc ...} 
] 

我在做什么，现在是让我的数据在componentWillMount生命周期的方法，像这样：

componentWillMount() { 
    firebaseRef.on('value', snap => { 
    let data = snap.val() // the whole original object (see ex. 1) 
    let tempArray = [] // an array to store my newly formatted objects 
    _.forEach(data, (item, key) => { 
     // Here's where i'm not really sure what to do. 
     // I want to use Object.assign to set a new key:value 
     // That adds "id": "-theobjectsmainkey" to a new object 
     // then push to my tempArray and finally setState with the 
     // correctly formatted array of objects. 
    }) 
    }) 
} 

想法？思考？谢谢。

Answer 1

您可以使用Object.entries()，.map()和对象传播

const data = { 
 
    "-Kdkahgiencls0dnh": { 
 
    "name": "a name", 
 
    "desc": "a description", 
 
    "other": "some other guff" 
 
    }, 
 
    "-Ksdfadfvcls0dsnh": { 
 
    "name": "another name", 
 
    "desc": "another description", 
 
    "other": "some more" 
 
    }, 
 
    "-kgoandiencls0dnh": { 
 
    "name": "I am a name", 
 
    "desc": "I am a description", 
 
    "other": "I am some other guff" 
 
    } 
 
} 
 

 
let res = Object.entries(data).map(([id, prop]) => ({id, ...prop})); 
 

 
console.log(res);

Answer 2

componentWillMount() { 
    firebaseRef.on('value', snap => { 
    let data = snap.val() // the whole original object (see ex. 1) 
    let tempArray = Object.keys(data).map((item, key) => { 
     return { 
      "id": item, 
      "name": data[item].name // etc, a structure what you want 
      ... 
     }; 
    }) 
    }) 
} 

Answer 3

在这里你去，只使用纯JS：

const raw = { 
    "-Kdkahgiencls0dnh": { 
    "name": "a name", 
    "desc": "a description", 
    "other": "some other guff" 
    }, 
    "-Ksdfadfvcls0dsnh": { 
    "name": "another name", 
    "desc": "another description", 
    "other": "some more" 
    }, 
    "-kgoandiencls0dnh": { 
    "name": "I am a name", 
    "desc": "I am a description", 
    "other": "I am some other guff" 
    } 
} 

let formatted = Object.keys(raw).map(
    key=>Object.assign(raw[key], {"id": ""+key}) 
); 

这里是一个fiddle获得现场演示。

Answer 4

Lodash的_.map()回调接收作为第二个参数的迭代键。使用对象赋值，创建具有键ID的新对象：

const array = _.map(data, (item, id) => Object.assign({ id }, item)) 

演示：

const data = {"-Kdkahgiencls0dnh":{"name":"a name","desc":"a description","other":"some other guff"},"-Ksdfadfvcls0dsnh":{"name":"another name","desc":"another description","other":"some more"},"-kgoandiencls0dnh":{"name":"I am a name","desc":"I am a description","other":"I am some other guff"}}; 
 

 
const array = _.map(data, (item, id) => Object.assign({ id }, item)); 
 

 
console.log(array);

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