如何将这个嵌套的对象数组转换为一个对象数组？

Question

我的api返回了这个配置文件对象数组：

const profilesData = [
  {
    profile: { id: "26144385", some: "more", other: "misc" },
    photo_details: {
      photos: [{ small: "bar-1", medium: "baz-1" }]
    }
  },
  {
    profile: { id: "26144334", some: "even", other: "some more" },
    photo_details: {
      photos: [
        { small: "bar-2", medium: "baz-2" },
        { small: "fizz-2", medium: "buzz-2" }
      ]
    }
  }
];

我需要对其进行转换，以便得到一个profileWithPhotos数组如下所示：

const profileWithPhotos = [
  {
    id: "26144385",
    some: "more",
    other: "misc",
    photos: [
      {
        small: "bar-1",
        medium: "baz-1"
      }
    ]
  },
  {
    id: "26144334",
    some: "even",
    other: "some more",
    photos: [
      {
        small: "bar-2",
        medium: "baz-2"
      },
      {
        small: "fizz-2",
        medium: "buzz-2"
      }
    ]
  }
];

到目前为止，我已经尝试将解析分解为更小的函数：

const getProfiles = profilesData =>
  profilesData.map(profileData => profileData.profile);

const getSmallAndMediumPic = pic => ({ small: pic.small, medium: pic.medium });

const getPhotos = profilesData =>
  profilesData.map(profileData => profileData.photo_details.photos.map(getSmallAndMediumPic));

const profiles = getProfiles(profilesData);
const photos = getPhotos(profilesData);

const profileWithPhotos = [...profiles, { photos: photos }];

现在我得到了这样的对象数组：

​​​​​[ { id: '26144385', some: 'more', other: 'misc' },​​​​​
​​​​​  { id: '26144334', some: 'even', other: 'some more' },​​​​​
​​​​​  { photos: [ [Object], [Object] ] } ]​​​​​

...which不是我想要的。

下面是一个具有上面代码的工作jsbin

我想把第一个提取的集合和第二个提取的集合结合起来。我该怎么做？

Answer 1

您可以通过一些ES6参数在对象中销毁和扩展语法来实现这一点。

​

const profilesData = [{"profile":{"id":"26144385","some":"more","other":"misc"},"photo_details":{"photos":[{"small":"bar-1","medium":"baz-1"}]}},{"profile":{"id":"26144334","some":"even","other":"some more"},"photo_details":{"photos":[{"small":"bar-2","medium":"baz-2"},{"small":"fizz-2","medium":"buzz-2"}]}}]

const result = profilesData.map(({profile, photo_details: {photos}}) => {
  return {...profile, photos}
})

console.log(result)

​

Answer 2

您可以使用一个破坏分配并为数组的每个元素组合一个新的对象。

​

const
    profilesData = [{ profile: { id: "26144385", some: "more", other: "misc" }, photo_details: { photos: [{ small: "bar-1", medium: "baz-1" }] } }, { profile: { id: "26144334", some: "even", other: "some more" }, photo_details: { photos: [{ small: "bar-2", medium: "baz-2" }, { small: "fizz-2", medium: "buzz-2" }] } }],
    result = profilesData.map(
        ({ profile: { id, some, other }, photo_details: { photos } }) =>
        ({ id, some, other, photos })
    );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

​

或者在即将发布的JS上为对象使用...。这和巴贝尔有关。

​

const
    profilesData = [{ profile: { id: "26144385", some: "more", other: "misc" }, photo_details: { photos: [{ small: "bar-1", medium: "baz-1" }] } }, { profile: { id: "26144334", some: "even", other: "some more" }, photo_details: { photos: [{ small: "bar-2", medium: "baz-2" }, { small: "fizz-2", medium: "buzz-2" }] } }],
    result = profilesData.map(
        ({ profile, photo_details: { photos } }) =>
        ({ ...profile, photos })
    );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

​

Answer 3

我觉得一个简单的map迭代会做你想做的事情。

const result = profilesData.map(data => {
  return {
    id: data.profile.id,
    some: data.profile.some,
    other: data.profile.other,
    photos: data.photo_details.photos
  }
})
console.log(result);

//result
[{
  id: "26144385",
  other: "misc",
  photos: {
     medium: "baz-1",
     small: "bar-1"
  }],
  some: "more"
}, {
  id: "26144334",
  other: "some more",
  photos: {
     medium: "baz-2",
     small: "bar-2"
  }, {
     medium: "buzz-2",
     small: "fizz-2"
  }],
  some: "even"
}]