将 Javascript 对象和子对象转换为对象数组 - lodash答案

【问题标题】：Convert Javascript object and children into array of objects - lodash将 Javascript 对象和子对象转换为对象数组 - lodash
【发布时间】：2016-06-03 17:17:26
【问题描述】：

我希望更改一些数据的结构。以下是我收到的数据示例

{
  ID1: {
         firstName: 'John',
         lastName: 'Doe'
      },
  ID2: {
         firstName: 'Jane',
         lastName: 'Doe'
      }
}

我需要做的就是将它转换成如下格式的数组：

[
  { ID: ID1, firstName: 'John', lastName: 'Doe' },
  { ID: ID2, firstName: 'Jane', lastName: 'Doe' }
]

如果可能，我更喜欢使用 lodash

【问题讨论】：

我应该澄清一下.. 每个条目的 ID 都不同。我更新了问题。
您遇到的具体问题是什么？如何迭代一个对象？如何向数组中添加新元素？如何为对象添加属性？将您的问题分解为更小的问题并为它们找到解决方案。所有这些小问题都曾被问过（或在教程中介绍过）。
这也与 JSON 无关。

标签： javascript arrays object lodash

【解决方案1】：

使用 Object.keys() 和 Array#map()。 Object.keys() 这有助于将对象的所有属性作为数组获取。然后可以使用 Array#map() 对元素进行迭代，并根据返回的元素生成新数组。

var data = {
  ID1: {
    firstName: 'John',
    lastName: 'Doe'
  },
  ID2: {
    firstName: 'Jane',
    lastName: 'Doe'
  }
};

var res = Object.keys(data) // get all object properties as an array
  .map(function(k) { // iterate and generate new array with custom element
    return { // generate custom array object based on the property and object and return
      ID: k, // k is property of ov=bjeck
      firstName: data[k].firstName, // get inner properties from data object using k
      larstName: data[k].lastName
    };
  })

console.log(res);

更新： 我创建了新对象而不是更新原始对象并将其返回。如果更新原始对象没有问题，则向对象添加附加属性并在 Array#map() 回调函数中返回引用。如果有任意数量的内部属性但它会更新原始对象，则此方法有效。

var data = {
  ID1: {
    firstName: 'John',
    lastName: 'Doe'
  },
  ID2: {
    firstName: 'Jane',
    lastName: 'Doe'
  }
};

var res = Object.keys(data) // get all object properties as an array
  .map(function(k) { // iterate and generate new array with custom element
    data[k].ID = k; // add additional property
    return data[k]; // return the reference
  })

console.log(res);

或者，如果您想维护对象并且有很多内部对象属性，请执行类似的操作。

var data = {
  ID1: {
    firstName: 'John',
    lastName: 'Doe'
  },
  ID2: {
    firstName: 'Jane',
    lastName: 'Doe'
  }
};

var res = Object.keys(data) // get all object properties as an array
  .map(function(k) { // iterate and generate new array with custom element
    var obj = { // create an object to return
      ID: k
    };
    for (var key in data[k]) // iterate over object property
      if (data[k].hasOwnProperty(key)) // check the object has the property 
        obj[key] = data[k][key]; // add property to the newly generated object
    return obj; // return the object
  })

console.log(res);

【讨论】：

这正是我想要的。你能解释一下它是如何工作的吗？我有点困惑'k'的值来自哪里。
@SohrabHejazi 但你更喜欢使用 lodash。我是用 lodash 做的
@SohrabHejazi 我明白，但你确定我的解决方案返回一个对象吗？
@SohrabHejazi : 更新，Object.keys() 返回一个包含所有对象属性的数组，map() 方法中的第一个参数是当前元素，它是数组中的键....，@987654326 @

【解决方案2】：

您可以为对象添加 ID 吗？如果是这样，那么可以通过以下方式轻松实现：

var arr = _.values(obj);

解释：

开发人员经常在值中复制键以避免许多问题。他们这样做：

{
  ID1: {
         ID: ID1,
         firstName: 'John',
         lastName: 'Doe'
      },
  ID2: {
         ID: ID2
         firstName: 'Jane',
         lastName: 'Doe'
      }
}

然后只使用上面的一个命令，它只返回对象的值并创建一个数组。

如果它不适合您，那么您需要像这样手动添加 ID：

var arr = _.map(obj, function(value, key) {
  value[ID] = key;
  return value;
});

小心，代码会改变原来的对象，但在大多数情况下这不是问题，但如果你需要避免这种情况，你需要：

var arr = _(obj)
  .clone()
  .map(obj, function(value, key) {
    value[ID] = key;
    return value;
  })
  .value();

【讨论】：

给对象加ID是什么意思？
@SohrabHejazi 我的两个解决方案都返回数组。

【解决方案3】：

您可以使用map()将对象转换为数组，然后使用assign()追加ID键值，这样也可以确保原始对象不会发生变异。

这里是 ES6 版本：

var result = _.map(data, (item, ID) => _.assign({ ID }, item));

var data = {
  ID1: {
         firstName: 'John',
         lastName: 'Doe'
      },
  ID2: {
         firstName: 'Jane',
         lastName: 'Doe'
      }
};

var result = _.map(data, (item, ID) => _.assign({ ID }, item));

console.log(result);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js"&gt;&lt;/script&gt;

这里是 es5 版本：

var result = _.map(data, function(item, ID) { 
  return _.assign({ ID: ID }, item);
});

【讨论】：