Exploring the capabilities of the Javascript Fetch API by making requests for binary Float32Array data with multiple

I need to fetch multiple 32-bit float values from different parts of a large binary file using range requests. This requires specifying multiple ranges in the request.

fetch("http://example.com/largeBinaryFile.bin", {
        headers: {
            'content-type': 'multipart/byteranges',
            'range': 'bytes=2-5,10-13',
        },
    })
    .then(response => {
        if (response.ok) {
            return response.text();
        }
    })
    .then(response => {
        console.log(response);
    });

Because I am fetching multiple ranges, I have to use text instead of arrayBuffer. When I print out the response, I see that the binary data is divided into different parts.

--00000000000000000002
Content-Type: application/octet-stream
Content-Range: bytes 2-5/508687874

1ȹC
--00000000000000000002
Content-Type: application/octet-stream
Content-Range: bytes 10-13/508687874

þC
--00000000000000000002--

The challenge now is how to extract the 32-bit float value from these multipart responses. I've attempted using Blob and FileReader to convert the data to arrayBuffer and then wrap it with Float32Array without success. Any advice on how to achieve this would be greatly appreciated. Thank you!

Answer №1

Greetings, I go by the name of Frank and I work as a Chromium Engineer. Below, I will share some intricate details that I implement in my project called Stealify to achieve binary interop with chromium.

const charset = 'x-user-defined';

// Refers to the UTF Private Address Space Area to extract bits as characters
const binaryRawEnablingHeader = `text/plain; charset=${charset}`;

// UNICODE Private Area 0xF700-0xF7ff.
const convertToAbyte = (chars) => 
  new Array(chars.length)
    .map((_abyte,offset) => chars.charCodeAt(offset) & 0xff);

const _BinaryRawFetch = (url) => fetch(url,{ headers: { 
  'Content-Type': binaryRawEnablingHeader,
  'range': 'bytes=2-5,10-13'
}}).then(
    (res) => convertToAbyte(res.text())
);

If you wish to convert this into plain text results, you would need a mechanism to extract the correct JSON sections efficiently based on their sizes. Subsequently, you can process them using String.codePointAt method similar to how it was done with bytes earlier, but only apply .map(String.codePointAt) to transform them into valid UTF-8 Characters, if necessary. This information is specifically directed towards the reader looking to manipulate a JSON Array.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sort function now accepts a limitless amount of arguments for sorting

We are tasked with creating a function that can take an unlimited number of arguments to sort an array by. For example: var data = [['John','London',35], ['Ricky','Kuala Lumpur',38], [' ...

JavaScript (geolocation) error: Unhandled TypeError - Invocation not allowed

Encountering the Javascript error "Uncaught TypeError: Illegal invocation" while executing the code var nativeGeoloation = window.navigator.geolocation.getCurrentPosition; nativeGeoloation(function (){ alert("ok")}); Despite attempting to call the code w ...

What is the best way to ensure all my borders are uniform in size?

As I work on a JavaScript project that organizes words into blocks based on their size, I encountered an issue with inconsistent border thickness in certain areas. I'm using spans to contain each word, but I can't figure out how to make the borde ...

Error: Uncaught TypeError - Unable to change value of 'innerHTML' for null object in VueJs

I have been encountering a similar problem to others, but despite trying the solutions provided in previous questions, I am unable to resolve it. In my <template>: <modal name="MyModal" > <span class="myClass" id="visible">visible< ...

Display search results in Rails without needing to refresh the entire tab

I have a search functionality incorporated within a Bootstrap tab, and I aim to display the search results dynamically without reloading the entire page, specifically within the tab itself. Despite adding 'remote: true' to the form_tag and incor ...

steps for using the push method to create a new array in JavaScript

Currently, I am attempting to create a new array that is similar to the myCourses array using the push method. However, for some reason it only seems to be logging one string at a time instead of generating a new array that mirrors the myCourses array: ...

Angular Pause until the variable is ready

I am in the process of developing a new web application service. The first step involves obtaining a token through the rest API. Once this token is obtained, it needs to be sent as a header to retrieve additional information. The issue I'm facing is ...

The JQuery category filtering feature malfunctions when a category consists of more than two words

Utilizing Jquery, I have implemented a feature that displays project categories and allows users to filter projects based on the selected category. To view the code pen for this implementation, please click here: https://codepen.io/saintasia/pen/dzqZov H ...

While tidying up the code in my home.vue file for my Vue.js project, I am constantly encountering these pesky errors

Compilation failed. ./src/views/Home.vue Error in Module (from ./node_modules/eslint-loader/index.js): C:\Users\OSOKA\Desktop\VUE\vue-shop\src\views\Home.vue 2:21 warning Remove ⏎···⏎·· ...

Difficulty with two-dimensional arrays in Angular and Typescript

I am currently stuck trying to assign values to a 2-dimensional object array in Angular/Typescript. I have noticed that the last assignment seems to override the previous ones, but I cannot pinpoint why this is happening. Could someone please review my cod ...

Node.js client encounters ENOBUFS error due to excessive number of HTTP requests

Currently, I have the following setup: An end-to-end requests system where a node.js client communicates with a node.js server. However, the issue arises when the client fails with an ENOBUFS error in less than a minute. client: (function(){ var lo ...

Angular elements that function as self-validating form controls

I'm wondering if there's a more efficient approach to achieve this, as I believe there should be. Essentially, I have a component that I want to function as an independent form control. This control will always come with specific validation requi ...

ng-class does not seem to be functioning properly when used within a file that is included via ng-include in

My question pertains to the menu I am loading using ng-include from the index file. <span ng-include="'app/components/common/menu.html'"></span> The content of menu.html is as follows: <li ng-class="active" > <a hr ...

TemplateUrl malfunctioning

While experimenting with basic Angular code, I encountered an issue where everything was functioning correctly when using template, but not when switching to templateUrl. I did not provide the previous code as it was working fine except for this specific c ...

The jQuery validation feature is failing to function properly within a bootstrap modal

I'm facing an issue with the jQuery validation plugin in my express app sign-up form that uses Bootstrap for the front-end. Despite setting rules and messages for name, email, and phone number fields, the validation is not functioning correctly. Below ...

Best method for extracting object values from an array in Javascript using loops?

Recently Updated: Complete values of respons: "{"versions":[ { "name":"Windows 8.1 with Update 3 (build 9600)", "version_id":"11" }, { "name":"Windows 7 SP1 (build 7601)", "version_id":"9" }, { "name": ...

What is the best way to confirm if a specific input is included in a JSON array?

This data belongs to me Each time a user inputs a code, it must be unique. If the value already exists, an error message should be displayed indicating that the branch code already exists. branches: [ { code: "test", na ...

Sending values to Vuex getters from a Vuex action

I have been utilizing a Vuex getter across various components in my application. However, I recently encountered a scenario where I require slightly more intricate logic before accessing the getter, leading me to employ a Vuex Action. The challenge now is ...

Creating beautifully formatted PDFs using pdfmake in AngularJS

I have a HTML popup displaying data retrieved from the server, and I am attempting to download this data as a PDF using the pdfmake plugin. While I am able to generate the PDF file, the challenge lies in replicating the HTML page layout in the PDF. Here is ...

One-way communication between two clients using Socket.io

While working on a basic socket.io application using React and Express, I've encountered an issue where two clients are facing difficulties in sending data to each other. For instance: Player 1 connects to the server followed by Player 2. Player 1 ...