gpt4 book ai didi

javascript - 将同一用户上传的图像分组到混合类型数组中

转载 作者:行者123 更新时间:2023-12-02 22:47:40 24 4
gpt4 key购买 nike

我有一个具有不同分配类型的数组,例如 imageLikeimageUpload

我一直在尝试减少数组,以便它将同一用户的所有 imageUpload 类型分组,然后将它们嵌套在一个 images: [] 数组中,同时不改变所有其他数据类型。

如何将数组缩小为仅将 imageUpload 类型嵌套到其指定的用户对象 images: [] 中?

这是我想到的:

$('.button').click(function(e) {
let button = $(this);
const mappedNotifications = [
{
"id":17,
"type":"comment",
"sender":17,
"recipient":3,
"itemId":5,
"commentImageId":19,
"replyImageId":"",
"imageLikeImageId":"",
"body":"great shot",
"created":"2019-10-09T20:18:47.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/default.jpg",
"imageCommentThumbnail":"images/thumb.jpeg",
"imageComment":"great shot",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":16,
"type":"imageLike",
"sender":17,
"recipient":3,
"itemId":19,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":19,
"body":"",
"created":"2019-10-09T20:18:40.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/thumb.jpeg",
"imageUploadThumbnail":"images/default.jpg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":15,
"type":"imageLike",
"sender":17,
"recipient":3,
"itemId":21,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":21,
"body":"",
"created":"2019-10-09T20:18:32.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/thumb.jpeg",
"imageUploadThumbnail":"images/default.jpg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":14,
"type":"imageUpload",
"sender":17,
"recipient":null,
"itemId":35,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":"",
"body":"",
"created":"2019-10-09T19:23:48.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/thumb.jpeg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":13,
"type":"imageUpload",
"sender":17,
"recipient":null,
"itemId":34,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":"",
"body":"",
"created":"2019-10-09T19:23:42.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/thumb.jpeg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":12,
"type":"imageUpload",
"sender":17,
"recipient":null,
"itemId":33,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":"",
"body":"",
"created":"2019-10-09T19:23:36.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/thumb.jpeg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":11,
"type":"imageUpload",
"sender":17,
"recipient":null,
"itemId":30,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":"",
"body":"",
"created":"2019-10-09T19:04:08.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/thumb.jpeg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
}
];

const object = {};
const nestedNotifications = mappedNotifications.reduce(function(result, data) {
if (!object[data.id]) {
if(data.type === 'imageUpload'){
// UPLOAD TYPE
if(!object[data.sender] ){}
else{
object[data.id] = {
id: data.id,
sender: data.sender,
type: data.type,
username: data.username,
userThumbnail: data.userThumbnail,
images: []
}
result.push(object[data.id]);
}
}
else{
// OTHER TYPES
object[data.id] = {
id: data.id,
sender: data.sender,
type: data.type,
username: data.username,
userThumbnail: data.userThumbnail,
}
result.push(object[data.id]);
}
}

if(data.type === 'imageUpload'){
//console.log('object[data.sender]: ', object[data.sender])
object[data.id].images.push({
id: data.id,
itemId: data.itemId,
imageUploadThumbnail: data.imageUploadThumbnail,

});
}
return result;
}, [])

console.log('nestedNotifications Output: ', nestedNotifications)
});

当前输出:

[
{
id: 17
sender: 17
type: "comment"
userThumbnail: "images/thumb.jpeg"
username: "golfer1",
},
{
id: 16
sender: 17
type: "imageLike"
userThumbnail: "images/thumb.jpeg"
username: "golfer1"
},
{
id: 15
sender: 17
type: "imageLike"
userThumbnail: "images/thumb.jpeg"
username: "golfer1"
},
{
id: 14
sender: 17
type: "imageUpload"
userThumbnail: "images/thumb.jpeg"
username: "golfer1",
images[
id: 14,
imageUploadThumbnail: "images/thumb.jpeg",
itemId: 35
]
},
{
id: 13
sender: 17
type: "imageUpload"
userThumbnail: "images/thumb.jpeg"
username: "golfer1",
images[
id: 13,
imageUploadThumbnail: "images/thumb.jpeg",
itemId: 34
]
},
{
id: 12
images: Array [ {…} ]
sender: 17
type: "imageUpload"
userThumbnail: "images/thumb.jpeg"
username: "golfer1",
images[
id: 12,
imageUploadThumbnail: "images/thumb.jpeg",
itemId: 33
]
},
{
id: 11
sender: 17
type: "imageUpload"
userThumbnail: "images/thumb.jpeg"
username: "golfer1",
images[
id: 11,
imageUploadThumbnail: "images/thumb.jpeg",
itemId: 30
]
}
]

期望的结果:

[
{
id: 17
sender: 17
type: "comment"
userThumbnail: "images/thumb.jpeg"
username: "golfer1",
},
{
id: 16
sender: 17
type: "imageLike"
userThumbnail: "images/thumb.jpeg"
username: "golfer1"
},
{
id: 15
sender: 17
type: "imageLike"
userThumbnail: "images/thumb.jpeg"
username: "golfer1"
},
{
id: 14
sender: 17
type: "imageUpload"
userThumbnail: "images/thumb.jpeg"
username: "golfer1",
images[
{
id: 14,
imageUploadThumbnail: "images/thumb.jpeg",
itemId: 35
},
{
id: 13,
imageUploadThumbnail: "images/thumb.jpeg",
itemId: 34
},
{
id: 12,
imageUploadThumbnail: "images/thumb.jpeg",
itemId: 33
},
{
id: 11,
imageUploadThumbnail: "images/thumb.jpeg",
itemId: 30
}
]
}
]

期望结果的示例模型:

/image/goW8r.jpg

最佳答案

看看我在这里是如何做到的。我已经对代码进行了评论,其中包含正在执行的操作的详细信息。

输出中的唯一区别是我将 uploadImage 存储在原始发送者对象中,而不是存储在该对象的第一个此类出现中。我认为从数据组织的 Angular 来看这是一种更好的方法。

const sort = (items) => {

// Let's declare some useful functions:
// isUpload tests if an item is an imageUpload while cherrypickItem returns the same object with a reduced set of key/values
const isUpload = item => item.type == "imageUpload"
const cherrypickItem = (item, keys) => keys.reduce((cherrypicked, propertyName) => ({...cherrypicked, [propertyName]: item[propertyName]}), {})

// allTypes will be an array of all items apart from imageUploads, while imageUploads will be the inverse of that
const allTypes = items.filter(item => !isUpload(item))
const imageUploads = items.filter(isUpload)

// Here we are creating a hash of the imageUploads sorted into keys by the sender id
const imageUploadsBySenderId = imageUploads.reduce((items, item) => {

return {
...items,
[item.sender]: items[item.sender] ? [...items[item.sender], item] : [item]
}
}, {})

return allTypes.map(item => {

// use our cherrypickItem function to return a reduced item object
let newItem = cherrypickItem(item, ['id', 'sender', 'type', 'userThumbnail', 'username'])

// if a lookup of our imageUploads shows that there are existing items from the sender
if (imageUploadsBySenderId[item.id]) {

// merge these into the item under the key 'images'
newItem = {
...newItem,
images: imageUploadsBySenderId[item.sender].map(imageUpload => {

return cherrypickItem(imageUpload, ['id', 'imageUploadThumbnail', 'itemId'])

})
}
}

// return the new item to the map
return newItem

})
}

const sorted = sort([
{
"id":17,
"type":"comment",
"sender":17,
"recipient":3,
"itemId":5,
"commentImageId":19,
"replyImageId":"",
"imageLikeImageId":"",
"body":"great shot",
"created":"2019-10-09T20:18:47.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/default.jpg",
"imageCommentThumbnail":"images/thumb.jpeg",
"imageComment":"great shot",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":16,
"type":"imageLike",
"sender":17,
"recipient":3,
"itemId":19,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":19,
"body":"",
"created":"2019-10-09T20:18:40.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/thumb.jpeg",
"imageUploadThumbnail":"images/default.jpg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":15,
"type":"imageLike",
"sender":17,
"recipient":3,
"itemId":21,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":21,
"body":"",
"created":"2019-10-09T20:18:32.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/thumb.jpeg",
"imageUploadThumbnail":"images/default.jpg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":14,
"type":"imageUpload",
"sender":17,
"recipient":null,
"itemId":35,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":"",
"body":"",
"created":"2019-10-09T19:23:48.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/thumb.jpeg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":13,
"type":"imageUpload",
"sender":17,
"recipient":null,
"itemId":34,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":"",
"body":"",
"created":"2019-10-09T19:23:42.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/thumb.jpeg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":12,
"type":"imageUpload",
"sender":17,
"recipient":null,
"itemId":33,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":"",
"body":"",
"created":"2019-10-09T19:23:36.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/thumb.jpeg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":11,
"type":"imageUpload",
"sender":17,
"recipient":null,
"itemId":30,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":"",
"body":"",
"created":"2019-10-09T19:04:08.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/thumb.jpeg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
}
])

console.log(sorted)

更新

如果您确实想在问题中得到所需的输出,那么下面的内容就足够了。不过,我会重新考虑重新使用 ID,从而以这种方式复制数据。

const sort = (items) => {

// Let's declare some useful functions:
// isUpload tests if an item is an imageUpload while cherrypickItem returns the same object with a reduced set of key/values
const isUpload = item => item.type == "imageUpload"
const cherrypickItem = (item, keys) => keys.reduce((cherrypicked, propertyName) => ({...cherrypicked, [propertyName]: item[propertyName]}), {})

// allTypes will be an array of all items apart from imageUploads, while imageUploads will be the inverse of that
const allTypes = items.filter(item => !isUpload(item))
const imageUploads = items.filter(isUpload)

// Here we are creating a hash of the imageUploads sorted into keys by the sender id
const imageUploadsBySenderId = imageUploads.reduce((items, item) => {

return {
...items,
[item.sender]: items[item.sender] ? [...items[item.sender], item] : [item]
}
}, {})

const imageUploadItems = Object.keys(imageUploadsBySenderId).map(senderId => {

return {
// hoist the first item in the array
...cherrypickItem(imageUploadsBySenderId[senderId][0], ['id', 'sender', 'type', 'userThumbnail', 'username']),
// and then nest all the items in an images property
images: imageUploadsBySenderId[senderId].map(item => cherrypickItem(item, ['id', 'imageUploadThumbnail', 'itemId']))
}
})

return allTypes.map(item => {

return cherrypickItem(item, ['id', 'sender', 'type', 'userThumbnail', 'username'])

}).concat(imageUploadItems)
}

const sorted = sort([
{
"id":17,
"type":"comment",
"sender":17,
"recipient":3,
"itemId":5,
"commentImageId":19,
"replyImageId":"",
"imageLikeImageId":"",
"body":"great shot",
"created":"2019-10-09T20:18:47.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/default.jpg",
"imageCommentThumbnail":"images/thumb.jpeg",
"imageComment":"great shot",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":16,
"type":"imageLike",
"sender":17,
"recipient":3,
"itemId":19,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":19,
"body":"",
"created":"2019-10-09T20:18:40.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/thumb.jpeg",
"imageUploadThumbnail":"images/default.jpg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":15,
"type":"imageLike",
"sender":17,
"recipient":3,
"itemId":21,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":21,
"body":"",
"created":"2019-10-09T20:18:32.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/thumb.jpeg",
"imageUploadThumbnail":"images/default.jpg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":14,
"type":"imageUpload",
"sender":17,
"recipient":null,
"itemId":35,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":"",
"body":"",
"created":"2019-10-09T19:23:48.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/thumb.jpeg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":13,
"type":"imageUpload",
"sender":17,
"recipient":null,
"itemId":34,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":"",
"body":"",
"created":"2019-10-09T19:23:42.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/thumb.jpeg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":12,
"type":"imageUpload",
"sender":17,
"recipient":null,
"itemId":33,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":"",
"body":"",
"created":"2019-10-09T19:23:36.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/thumb.jpeg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
},
{
"id":11,
"type":"imageUpload",
"sender":17,
"recipient":null,
"itemId":30,
"commentImageId":"",
"replyImageId":"",
"imageLikeImageId":"",
"body":"",
"created":"2019-10-09T19:04:08.000Z",
"username":"golfer1",
"userThumbnail":"images/thumb.jpeg",
"imageLikeThumbnail":"images/default.jpg",
"imageUploadThumbnail":"images/thumb.jpeg",
"imageCommentThumbnail":"images/default.jpg",
"imageComment":"",
"imageReplyThumbnail":"images/default.jpg",
"imageReply":""
}
])

console.log(sorted)

关于javascript - 将同一用户上传的图像分组到混合类型数组中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58323056/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com