Tips on obtaining a byte array from within a JSON object

Question

Tips on obtaining a byte array from within a JSON object

I am currently facing a challenge in retrieving a PDF file from the server, which is enclosed within a JSON object.

When I send a byte array of the PDF to the front-end, I can successfully read it by configuring the responseType to arraybuffer. Subsequently, I can proceed to download the PDF as follows:

var blob = new Blob([data], { type: application/pdf});
    if ($window.navigator && $window.navigator.msSaveOrOpenBlob) {
        $window.navigator.msSaveOrOpenBlob(blob);
    } else {
        var a = document.createElement("a");
        document.body.appendChild(a);
        var fileURL = URL.createObjectURL(blob);
        a.href = fileURL;
        a.download = fileName;
        a.click();
    }
}

However, when the server sends JSON with the byte array embedded within, setting the responseType to JSON poses a challenge in converting the blob. So, if I set the responseType to arrayBuffer, I receive an array of arrayBuffers. How can I convert this into JSON while still being able to extract the PDF afterwards?

The JSON structure that I receive is as follows:

{
  result: true,
  value: <the pdf byte array>,
  errorMessage: null
}

javascript angularjs json arraybuffer

Answer 1

Answer №1

Converting bytes to base64 String is recommended, then you can read the bytes from it on the UI.

Answer 2

Converting bytes to base64 String is recommended, then you can read the bytes from it on the UI.

Answer 3

Answer №2

If we consider the variable below to represent the structure of the responseText:

responseText = {
      result: true,
      value: <the pdf byte array>,
      errorMessage: null
}

The byte array can be accessed using responseText.value. If the byte array is already in the form of a Uint8Array, then this method should work.

(Please note: There are other Typed Arrays available, so choose the most suitable one for your case):

var blob = new Blob([response.value], { type: 'application/pdf'});
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob);
} else {
    var a = document.createElement("a");
    document.body.appendChild(a);
    var fileURL = URL.createObjectURL(blob);
    a.href = fileURL;
    a.download = 'test';//filename
    a.click();
}

However, if the byte array is in the form of a string array or integer array, like below:

responseText.value = [145, 229, 216, 110, 3]

and it needs to be converted to a typed byte array, you can use the following code:

var ba = new Uint8Array(responseText.value);

or

var ba = new Uint8Array([145, 229, 216, 110, 3]);

Therefore,

var blob = new Blob([ba], { type: 'application/pdf'});

This method allows the byte array to be used for creating a blob, enabling the file to be downloaded when the click event occurs.

Answer 4

If we consider the variable below to represent the structure of the responseText:

responseText = {
      result: true,
      value: <the pdf byte array>,
      errorMessage: null
}

The byte array can be accessed using responseText.value. If the byte array is already in the form of a Uint8Array, then this method should work.

(Please note: There are other Typed Arrays available, so choose the most suitable one for your case):

var blob = new Blob([response.value], { type: 'application/pdf'});
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob);
} else {
    var a = document.createElement("a");
    document.body.appendChild(a);
    var fileURL = URL.createObjectURL(blob);
    a.href = fileURL;
    a.download = 'test';//filename
    a.click();
}

However, if the byte array is in the form of a string array or integer array, like below:

responseText.value = [145, 229, 216, 110, 3]

and it needs to be converted to a typed byte array, you can use the following code:

var ba = new Uint8Array(responseText.value);

or

var ba = new Uint8Array([145, 229, 216, 110, 3]);

Therefore,

var blob = new Blob([ba], { type: 'application/pdf'});

This method allows the byte array to be used for creating a blob, enabling the file to be downloaded when the click event occurs.

Answer 5

Answer №3

To transform a byte array into a string value, and vice versa, follow these steps: 1. Set the byte array value as a string. 2. When parsing the JSON data, convert the string back into a byte array.

For a practical example, refer to the following Java Byte Array Conversion Guide.

Answer 6

To transform a byte array into a string value, and vice versa, follow these steps: 1. Set the byte array value as a string. 2. When parsing the JSON data, convert the string back into a byte array.

For a practical example, refer to the following Java Byte Array Conversion Guide.

Tips on obtaining a byte array from within a JSON object

Answer №1

Answer №2

Answer №3

Similar questions

Getting the final element in a MySQL JSON array: Tips and tricks

how to open a new tab using JavaScript with Selenium

Calling a JavaScript function using string parameters

Displaying two distinct tables utilizing ng-repeat by employing customized directives

Accessing data from API

How can we use the useState hook in React to dynamically generate state variables?

Obtain a nested array of objects from Mongoose's Model.find() method and then make modifications to the inner array

core.js:15723 ERROR TypeError: Unable to access the 'OBJECT' property because it is undefined

Converting Neo4j graph data into JSON format

Exploring the Depths: A Guide to Selecting Nodes in Java Based on Depth

Error Message for Tastypie FormValidation Issue

Prevent Mui popover from closing when clicking outside

Transferring a JavaScript variable to JSP using AJAX

Locate all nodes in neo4j that are connected to nodes matching a specified list of property values of a certain length

Using a loop in a Vue.js slick slider: easy step-by-step guide

Convert JSON to HTML tooltip content - hide brackets and include <br> tags

Modify the text highlighted in bold within the AngularJS application

AngularJS is used to vertically collapse three different div elements. This feature

Tips for transferring information from ng-view to the navbar on the index.html page using AngularJS

MUI: Autocomplete received an invalid value. None of the options correspond to the value of `0`