How to read Blob (octet-stream) to JSON object?

Question

From a http request, a blob (b) (type application/octet-stream) is downloaded and then needs to be processed, it contains a json object.

I tried the following:

var reader = new FileReader();
reader.readAsText(b);
var readResult = <string> reader.result;
console.log(readResult);
var obj = JSON.parse(readResult);

It doesn´t work, and readResult is null.

How can you process a blob that contains a json into a json object?

readAsText is asynchronous. You need to listen to the loadend event. See developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsText — user47589
– user47589, Commented Mar 21, 2019 at 16:12
Another possible duplicate of stackoverflow.com/questions/11829537/… — user47589
– user47589, Commented Mar 21, 2019 at 16:14

keemor · Accepted Answer · 2021-07-01 13:22:45Z

6

When the request has responseType: 'blob' it returns binary, but if an error occurs message is returned as JSON inside Blob.

This is how you can decode JSON messages from blob:

(response) => {
  return response;
},
async (error) => {
  if (error.response.data instanceof Blob) {
    const blob = new Blob([error.response.data]);
    const data = await blob.text();
    const { message, details } = JSON.parse(data);
    //display message and details to the user
  }
}

answered Jul 1, 2021 at 13:22

keemor

1,28918 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Don Hatch Over a year ago

This won't work in chrome if the blob is >=.5Gb, since it's impossible to create a string that big.

Priyesh Diukar · Accepted Answer · 2019-03-21 16:22:27Z

4

You will need an onload event like so:

var blob = new Blob([JSON.stringify({"test": "Hello from JSON!"})], {type : "application/json"}),
    reader = new FileReader();

reader.onload = function() {
    document.body.innerText = JSON.parse(this.result).test;
};

reader.readAsText(blob);

answered Mar 21, 2019 at 16:22

Priyesh Diukar

2,1241 gold badge17 silver badges19 bronze badges

Comments

yasszoug · Accepted Answer · 2020-12-20 19:04:37Z

Code example :

try{
      await this.exampleservice.MygetRequest().then(httpResponse => {
        httpResponse.body.text().then(text => {
          //console.log(text);
          obj = JSON.parse(text);
          //console.log('obj after parse:' ,obj);
          let data = obj.result.data; 
          console.log('My data:' ,data);
        });
    });
    }catch (error) {
      if (error instanceof HttpErrorResponse) {
        Swal({
          type: 'error',
          title: this.errorsService.getErrorMessage(error.status),
          showConfirmButton: false,
          timer: 1500
        });
        this.feedback_errors = error.error.errors;
        this.feedback_errors_keys = this.feedback_errors ? Object.keys(this.feedback_errors) : null;
      } 
    }

Collectives™ on Stack Overflow

How to read Blob (octet-stream) to JSON object?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related