How to read RAW JSON in Angular JS from HTTP get method, when response type is arraybuffer?

Question

I am trying to read ByteArray to show PDF form Java into Angular JS using

 method : 'GET'
 url        : '',
 cache  : isCache||false,
 responseType: 'arraybuffer'

This is working fine when everything okay.

But when I throw an exception with some proper JSON and marking HTTP Status as bad request, I can't read JSON response even after changing config to respone.config.responseType='application/json'.

It showing only empty ArrayBuffer {} on response.data.

But important thing here is, I can see JSON response in google chrome developer tool request.

I googled, searched on stack overflow but didn't find much.

Below lines added later

I am adding response object picture and data received pic from chrome network connection.

First Image : Response object from error function of angular JS.

Second Image - Server returning proper JSON message

Third Image - Request and Response Header pics

Only problem I am facing is not able read data of response as I set response type to arraybuffer

Duplicate of https://stackoverflow.com/questions/30052567/how-to-read-json-error-response-from-http-if-responsetype-is-arraybuffer find the correct answer in that post — Alberto Rechy, Sep 15 '17 at 17:11

score 1 · Accepted Answer · edited May 23 '17 at 11:45

Instead of expecting arraybuffer why not expect application/json all the time, then when you return your data that's supposed to create your pdf, do a base64 of the data, put it in a json object and return it to the client

Even when you throw an exception you still expect JSON. Your response from server side could be something like:

{
    responseCode: // your response code according to whether the request is success or not,
    responseMessage: // success or fail
    data: // your base64 encoded pdf data(the data that if the request is successful will be returned), note it will be returned as a normal string
} // I'm hoping you know how to base64 encode data

Then in your client side(Javascript), perform an if

if(data.responseCode == //errorCode) {
    alert(data.responseMessage);
} else {
    // Unpack data
    var myPdfData = // base64 decode(data.data)
    // Do logic to create and open/download file
}

You don't even need to decode the data, you just create a blob object, then trigger a download from the blob

I am accepting your answer as it gives me alternate way to pass binary data in base 64 form from back end to front end instead expecting array buffer. — Viraj, Mar 29 '16 at 09:00

aup · Answer 2 · 2016-03-17T10:56:17.860

-1

If the responsetype is arraybuffer, to view it, you should convert it into a blob and create a objectUrl from that blob, and the download it or open in a new tab/browser window to view it.

Js:

$http.get('your/api/url').then(function(response) {
var blob = new Blob([response.data], { type: 'application/pdf' });
    var downloadUrl = URL.createObjectURL(blob);

    $timeout(function () {
        var link = document.createElement('a');
        link.download = 'SOME_FILE_NAME'+ '.pdf';
        link.href = downloadUrl;
        link.click();
    }, 100);
}, function(errorResponse){
    alert(errorResponse.error.message);
});

edited Mar 17 '16 at 10:56

answered Mar 17 '16 at 08:03

aup

800
7
19

I can able to download or view PDF, Problem is when I through some exception with message instead of sending binary data.I want to show normal text from JSON instead of binary as I want to display error to end user on screen. – Viraj Mar 17 '16 at 10:00
Please check I have added some pics for better understanding. – Viraj Mar 17 '16 at 10:52
If you're API is returning JSON when you get the 400 - Bad Request response, then my code above should work and display your error message from the server. – aup Mar 17 '16 at 10:56
It is calling error function but response is comping empty like arraybuffer{} – Viraj Mar 17 '16 at 12:46
But in your image your receiving json? If you get arraybuffer from the server when something went wrong, you can't read it as json, since it's not json. If you control the server side code, I suggest you change your response into an object that contains 2 properties, like this: `{ file: theArrayBuffer, message: "some message if an error occurred" }`. Then if the arrayBuffer is null you display the message instead. – aup Mar 17 '16 at 12:50
I am receiving JSON which I built for returning Error Message but due to response Type is arraybuffer, I can't read it. – Viraj Mar 17 '16 at 14:43

How to read RAW JSON in Angular JS from HTTP get method, when response type is arraybuffer?

2 Answers2