Question

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

// 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()

时，我松开了主键

我想做的是让我的对象形成：

// 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

Lodash的_.map()回调作为第二个参数接收迭代密钥。使用对象分配，创建一个新对象，其键为id：

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

<强>演示：

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

您可以使用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 3

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 4

在这里，你只使用纯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来获得现场演示。

使用map和forEach重构对象

4 个答案: