Javascript 使用map和forEach重新构造对象

我有一个对象，我正试图映射到react组件（使用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"
  }
}

…但是，当我运行

\uu.map（）

我想做的是让我的物体变成：

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

我现在做的是在

组件willmount

生命周期方法中获取数据，如下所示：

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.
    })
  })
}

---

想法？思想？谢谢。

给你，只使用纯JS：

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

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

---

下面是一个获取实时演示的示例。

在这里，只使用纯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})
);

下面是一个获取实时演示的示例。

Lodash的

\uz.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”：“other name”，“desc”：“other description”，“other”：“some more”}，“-kgoandiencls0dnh”：{“name”：“I am a name”，“desc I am a description”，“other”：“I am other guff”}；
常量数组=389;.map（数据，（项，id）=>Object.assign（{id}，项））；
console.log（数组）
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”：“other name”，“desc”：“other description”，“other”：“some more”}，“-kgoandiencls0dnh”：{“name”：“I am a name”，“desc I am a description”，“other”：“I am other guff”}；
常量数组=389;.map（数据，（项，id）=>Object.assign（{id}，项））；
console.log（数组）
您可以使用
对象.entries（）
、
.map（）
和对象扩展


const数据={
“-Kdkahgiencls0dnh”：{
“姓名”：“姓名”，
“描述”：“描述”，
“其他”：“其他一些废话”
},
“-Ksdfadfvcls0dsnh”：{
“姓名”：“另一个姓名”，
“描述”：“另一种描述”，
“其他”：“更多”
},
“-kgoandiencls0dnh”：{
“名字”：“我是一个名字”，
“描述”：“我是一个描述”，
“其他”：“我是其他一些废话”
}
}
让res=Object.entries（data.map）（[id，prop]）=>（{id，…prop}））；
控制台日志（res）
您可以使用
对象.entries（）
，
映射（）
和对象扩展


const数据={
“-Kdkahgiencls0dnh”：{
“姓名”：“姓名”，
“描述”：“描述”，
“其他”：“其他一些废话”
},
“-Ksdfadfvcls0dsnh”：{
“姓名”：“另一个姓名”，
“描述”：“另一种描述”，
“其他”：“更多”
},
“-kgoandiencls0dnh”：{
“名字”：“我是一个名字”，
“描述”：“我是一个描述”，
“其他”：“我是其他一些废话”
}
}
让res=Object.entries（data.map）（[id，prop]）=>（{id，…prop}））；
控制台日志（res）第一个例子给出：
[{“desc”：“first description”，“subtitle”：“first subtitle”，“title”：“first Project title”}，{“desc”：“此处无需说明。无需查看”，“subtitle”：“subtitle of The gods”，“title”：“Other Project”}，{“desc”：“如果我有desc，它会转到此处”，“subtitle”：“我是subtitle听到我吼叫”，“title”：“Final project example”}]
这不添加id属性第一个示例给出：
[{“desc”：“first description”，“subtitle”：“first subtitle”，“title”：“first project title”}，{“desc”：“此处无需说明，无需查看”，“subtitle”“：”诸神的副标题“，”标题“：”另一个项目“}，{”描述“：”如果我有描述，它会出现在这里“，”副标题“，”我是副标题“听到我咆哮”，“标题“：”最终项目示例“}]
这不会添加id属性YYAS！！！这正是我想要的。我希望我能更好地理解这是在做什么…@archae0pteryx看，这很有帮助。非常感谢。请记住，您需要为
对象.entries
使用多边形填充。一种更传统的方法是使用@aaaaaa Polyfills迭代对象，如果需要，可以使用@aaaaaa Polyfills，并链接到上面的注释中。YAS！！！这正是我想要的。我希望我能更好地理解这是在做什么…@archae0pteryx看，这很有帮助。非常感谢。请记住，您需要为
对象.entries
使用多边形填充。一种更传统的方法是使用@aaaaaa Polyfills（如果需要）迭代对象，并在上面的注释中链接。就个人而言，我不喜欢lodash的
map
风格如何获取集合并输出数组，但这种行为正是OP想要的。就个人而言，我不喜欢lodash的
map
风格如何获取集合并输出数组，但这种行为正是OP想要的。