[英]How do I transform this nested array of objects into a single array of objects?
我的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] ] } ]
...這不是我想要的。
這是上面代碼的工作jsbin
我想采摘並結合第一個提取的集合與第二個提取的集合。 我該怎么做呢?
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對象。 這讓BABEL感到擔心。
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; }
我覺得簡單的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"
}]
您可以使用一些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)
我只需要遍歷profilesData數組並創建一個新數組,即可使用所需的屬性來重建對象。 就像是..
var data = [];
for(var i=0;i<profilesData.length;i++){
data[i] = profilesData[i].profile;
data[i].photos = profilesData[i].photo_details.photos
}
console.log(data);
您可以將array#map
和array#reduce
與Object.assign()
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(o => Object.values(o).reduce((r,o) => Object.assign(r, o), {})); console.log(result);
這很簡單:
profilesData.map(data => Object.assign({}, data.profile, { photos: data.photo_details.photos }));
或者,如果您僅針對最新環境,或者例如使用Babel進行轉譯,則可以通過參數解構和對象散布來使其更加簡潔:
profilesData.map(({profile, photo_details: {photos}}) => ({ ...profile, photos }));
您可以在下面的代碼片段中看到兩者都在起作用。
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 profilesWithPhotos = profilesData.map(data => Object.assign({}, data.profile, { photos: data.photo_details.photos })); console.log(profilesWithPhotos); console.log('-----'); const profilesWithPhotos2 = profilesData.map(({profile, photo_details: {photos}}) => ({ ...profile, photos })); console.log(profilesWithPhotos2);
.as-console-wrapper{min-height:100%}
好吧,似乎來晚了,但我認為這可以解決```
const transformedProfilesData = profilesData.reduce((array, object) => {
const profile = {...object.profile}
const photos = object.photo_details.photos.map(photo => photo)
profile.photos = photos
array.push(profile)
return array
}, [])
```
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.