Групповые загрузки изображений одним и тем же пользователем в массив смешанного типа - PullRequest
Новая
       2

Групповые загрузки изображений одним и тем же пользователем в массив смешанного типа

0 голосов
/ 10 октября 2019

У меня есть массив с различными выделенными типами, такими как imageLike , imageUpload и т. Д.

Я пытался уменьшить массив, чтобы он сгруппировал все 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
            }
        ]
    }
]

Пример макета желаемого результата:

https://i.imgur.com/mzloa4i.jpg

Ответы [ 2 ]

1 голос
/ 10 октября 2019

Посмотрите, как я это сделал здесь. Я прокомментировал код с деталями того, что делается.

Единственная разница в выводе состоит в том, что я сохраняю uploadImage s в исходном объекте отправителя, а не внутри первого такого вхождения этогообъект. Я думаю, что это лучший подход с точки зрения организации данных. 

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)

Обновление

Если вы действительно хотите получить желаемый результат в своем вопросе, то приведенного ниже должно быть достаточно. Однако я бы пересмотрел возможность повторного использования идентификатора и тем самым дублировал данные таким образом. 

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)
0 голосов
/ 10 октября 2019

Я не пробовал это, но я думаю, что это должно работать, если я правильно понял ваше требование. 

const yourData = [//your data here];
let data = {};
yourData.forEach(attach => {
  if(Object.keys(data).includes(attach.username)) {
    data[attach.username] = { ...data[attach.username], 
        images: [...data[attach.username].images,
         { id: attach.id,
           imageUploadThumbnail: attach.imageUploadThumbnail,
           itemId: attach.itemId 
           //other fields you want
        }]};
  } else {
    data[attach.username] = { id: attach.id,
        sender: attach.sender,
        type: attach.type,
        userThumbnail: attach.userThumbnail,
        // other fields you want
        username: attach.username, images: [{ 
            id: attach.id,
            imageUploadThumbnail: attach.imageUploadThumbnail,
            itemId: attach.itemId 
            //ohter fields you want
    }]};
  }
});
const desired = Object.keys(data).map(key => data[key]);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...