Combining two arrays when a promise resolves in vue js

Question

I have this data i have held in this variable this.roomsData.room_photos

[ { "url": "https://api.example.com/uploads/609ee58907166.jpg" }, { "url": "https://api.example.com/uploads/609ee5898ba19.jpg" }, { "url": "https://api.example.com/uploads/609ee58994a10.jpg" }, { "url": "https://api.example.com/uploads/609ee589af635.jpg" }, { "url": "https://api.example.com/uploads/609ee589b0fc7.jpg" }, { "url": "https://api.example.com/uploads/609ee589cd79f.jpg" }, { "url": "https://api.example.com/uploads/609ee589d8d27.jpg" } ]

and this data

[ { "url": "https://api.example.com/uploads/609eeded64530.jpg" }, { "url": "https://api.example.com/uploads/609eeded68ebe.jpg" }, { "url": "https://api.example.com/uploads/609eeded6a6bc.jpg" } ]

i have in this variable this.roomsData.edit_room_photos and its being generated from

uploadRoomImages: async function (file, progress, error, options) {
    try {
        console.log(file, options);
        const formData = new FormData()
        formData.append('room_photos', file)
        const result = await fetch('https://api.example.com/uploads_scripts/rooms.php', {
            method: 'POST',
            body: formData
        })
        progress(100) // (native fetch doesn’t support progress updates)
        return await result.json()
    } catch (err) {
        error('Unable to upload file')
    }

},

and this is the component

<FormulateInput
          type="image"
          name="room_photos"
          v-model="roomsData.edit_room_photos"
          label="Select Room Images To Upload"
          help="Select a png, jpg,webp or gif to upload."
          validation="required|mime:image/jpeg,image/png,image/gif,image/webp"
          :uploader="uploadRoomImages"
          error-behavior="live"
          multiple
/>

Since there is data already in this variable this.roomsData.room_photos , how can i add the data in this variable this.roomsData.room_photos to data i get from waiting for my function to resolve and store the data here this.roomsData.edit_room_photos

I have tried object assign and array concat on the form submit handler but that results to cyclic json errors.

I want to add the data in the two arrays together without removing the duplicates. How can i combine the two arrays together without removing duplicates.

Answer 1

You can use a computed value with a setter:

computed: {
  room_photos: {
    get: function () {
      return [...this.roomsData.room_photos, ...this.roomsData.edit_room_photos];
    },
    set: function (newValue) {
      this.roomsData.edit_room_photos = newValue.slice(this.roomsData.room_photos.length);
    },
  },
},

Answer 2

If the result of uploadRoomImages() leads to the value of roomsData.edit_room_photos, you could just modify the return value of uploadRoomImages() to .concat the other array:

uploadRoomImages: async function (file, progress, error, options) {
    try {
        //...
        const result = await result.json()
        return result.concat(this.roomsData.room_photos)
    } catch (err) {
        error('Unable to upload file')
    }
},

Note Array.prototype.concat() does not filter out duplicates, so there's no need to be concerned about losing duplicate entries in this case.