I have an object containing a nested array of objects, each containing buffers of jpeg images :-

   const imageBufferObject1 = { id: "123456-001", buffer: "...Uint8Array" };
   const imageBufferObject2 = { id: "123456-002", buffer: "...Uint8Array" };

const mediaObject = {
        id: "123456",
        mediaBufferArray: [
          imageBufferObject1,
          imageBufferObject2,
          ...
          imageBufferObject200,
        ],
      };

I've successfully converted the Object into a Blob to store in a database:

const mediaObjectBlob = new Blob([JSON.stringify(mediaObject)])

... and saved it as a Blob.

On retrieving it from the database, I get the following on the client side:

fetchedBlob:


Blob {size: 1249513, 
      type: 'application/octet-stream'}
      size: 1249513
      type: "application/octet-stream"[[Prototype]]: Blob
      arrayBuffer: ƒ arrayBuffer()
      size: (...)
      slice: ƒ slice()
      stream: ƒ stream()
      text: ƒ text()
      type: (...)
      constructor: ƒ Blob()
      Symbol(Symbol.toStringTag): "Blob"get size: ƒ size()
       get type: ƒ type()[[Prototype]]: Object

I'm trying to extract the original JS Object from the Blob using the following:

const retrievedObject = JSON.parse(fetchedBlob)

but only getting the following back when I console.log:

Blob {size: 1249513, type: 'application/octet-stream'}

Question: How do I extract the original JS Object so that I can access the mediBufferArray ?

Please help.