What is the proper method for interpreting binary floating-point data when utilizing XMLHttpRequest?

I am attempting to load a binary file containing floating-point values into an array using JavaScript. Here is my current method:

var mRequest = new XMLHttpRequest();
mRequest.open('GET', 'res/binary_float_data.bin');
mRequest.responseType = 'arraybuffer';

mRequest.onreadystatechange = function () {
    if (mRequest.readyState === 4) {

        // Obtain bytes
        var buffer = mRequest.response;
        var dataview = new DataView(buffer);

        // Create buffer (4 bytes / float)
        var mFloatArray = new Float32Array(buffer.byteLength / 4);

        // Populate floats
        for (var i = 0; i < mFloatArray.length; i++) 
        {
            mFloatArray[i] = dataview.getFloat32(i * 4); // Every 4th byte
        }

        console.log("Loaded "+mFloatArray.length+" floats");

        // Process mFloatArray
    }
};

mRequest.send();

However, upon inspecting the minimum, maximum, and average values of mFloatArray, I notice that they are inaccurate. The expected values should be:

min: -0.0094
max: 0.0081
avg: 0.00013196

Instead, the values I am seeing are:

min: -3.3985008792505584e+38
max: 0
avg: NaN

I am certain that the binary file is correct. Is there an issue with how I am parsing the XMLHttpRequest?

EDIT: Including a snippet of the binary file in hexadecimal format:

0002980: 0000 0000 0000 0000 0000 0000 0000 0000  ................
0002990: 0000 0000 0000 0000 0000 0000 55df 11bc  ............U...
00029a0: afc5 13bc c0b2 15bc 4205 17bc a094 17bc  ........B.......
00029b0: e3d4 17bc cb41 18bc f2e6 18bc 464d 19bc  .....A......FM..
00029c0: bb94 18bc f6ca 16bc 29a5 14bc 0000 0000  ........).......
00029d0: 0000 0000 0000 0000 0000 0000 0000 0000  ................

EDIT 2: I generated the binary file using Matlab's "fwrite" command with precision set as 'float32'.

Answer №1

The importance of endianness in your data cannot be overstated: Understanding Javascript Typed Arrays and Endianness

To handle this, you may need to determine the endianness of your system and process the data byte by byte. Alternatively, you could create two versions of the file with different endianness settings and dynamically choose the appropriate one based on the user's browser configuration.

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

Potential risk of memory leakage when utilizing the CanvasRenderer

I've encountered a memory leak problem within my application. After some investigation, I've been able to simplify the issue into a test case found here: http://jsfiddle.net/729sv/ It seems that adding and removing geometry from a scene is causi ...

React JS BlueprintJS Date Range Picker not functioning as expected

I am struggling to implement a DateRangePicker using BlueprintJS on my component, following the instructions in the documentation. I also want to include a RangePicker similar to the one shown in this screenshot. I have successfully installed all the nece ...

Having trouble with Vue Router view not functioning properly in my Laravel Blade page

While diving into the world of Vue.js, I encountered a perplexing issue. After successfully running ExampleComponent.vue in my admin panel and displaying its content, I attempted to import routes from an external file (new_route_list.js) and load them via ...

The functionality of the click and mousedown events seems to be disabled when using an Ajax form

Trying to create a simple Ajax popup featuring a form with 3 data fields and a submit button, however I'm unable to trigger the submit button programmatically. jQuery('#FormSubmit').click() seems to have no effect. The same goes for jQuer ...

During the installation of a package, npm encountered a require stack error with the code MODULE_NOT_FOUND

Whenever I attempt to install something using the npm install command, it throws an error saying "require stack" and "code MODULE_NOT_FOUND" C:\Users\dell>npm audit fix node:internal/modules/cjs/loader:1075 const err = new Error(message); ...

AngularJS: The delay in updating variable bindings following a REST API call

When utilizing a REST service, I wanted to implement a variable to show whether the service is currently loading or not. Controller $scope.loading = true; $http.get('/Something'). success(function(data, status, headers, config) ...

Close the material-ui popper when clicking away

I am currently working on implementing a Material UI popper feature that should close when the user clicks outside of it using ClickAwayListener. However, I have been unable to make this functionality work despite trying different approaches. I've att ...

What's preventing the `@change` trigger from functioning properly with v-data-picker?

In my Vue.js application, I am utilizing the v-calendar package. I am trying to pass selected date range values to the parent component. However, why is the @change trigger not working? Parent.vue: <template> <div> <Child @set ...

Creating a reset or refresh button with JavaScript: Step-by-step guide

Can someone please help me figure out how to create a button that will refresh the page while also resetting all values to their default settings? ...

Adjust the initial scroll position to - apply overflow-x: scroll - on the specified element

I have an image that can be scrolled to the right on screens that do not fit the full width, but I want the center of the image to be displayed first instead of the left side. Below is my React code: import React, { useEffect, useRef, useState } from &qu ...

Do you know of a solution to fix the Stylelint error regarding semicolons when using CSS variables?

React.js Css in JS(Emotion) The components above are part of this setup. Here is the configuration for Stylelint: module.exports = { extends: [ "stylelint-config-standard", "./node_modules/prettier-stylelint/config.js", ], ...

Comprehending the application of jQuery's .remove() function within an AJAX context

Chapter 10 of jQuery In Action 3rd Edition showcases the following code snippet: $('#boot-chooser-control') .load('actions/fetch-boot-style-options.php') .change(function(event) { $('#product-detail-pane').load ...

Enhance the functionality of your Rails application by implementing Ajax or jQuery to asynchronously load table elements separately from the page

Currently, I am facing an issue with a page that displays a list of user sites. The problem lies in the fact that I am making an API call for each site to check its status, which is causing the page to load very slowly. To address this issue, I would like ...

Forwarding based on URL/Query Parameters

I'm looking to create a redirect for users based on URL or query parameters, but I'm not sure how to go about it. For example, if the URL is https://www.tamoghnak.tk/redirect?link=https://www.tamoghnak.tk/gobob, I want to redirect to /gobob. If ...

Customize the CSS for the column containers in Material-UI's DataGrid with the

I am facing a challenge in trying to override the CSS property position on the .MuiDataGrid-columnsContainer. Upon reviewing the information available on https://material-ui.com/api/data-grid/#css, it seems that there is a rule defined for root but not spe ...

The android webview is having trouble loading HTML that includes javascript

I have been attempting to showcase a webpage containing HTML and JavaScript in an android webview using the code below. Unfortunately, it doesn't seem to be functioning properly. Can someone provide assistance? Here is the code snippet: public class ...

extracting array index from a Mongoose array

//index.js let countryNameList = { "name"=["Bangladesh","India","Australia"] } //Output Section let findCountryIndex = awaitDataModel.find({$indexOfArray:{CountryName:"Bangladesh"}}) console.log(findCountryIndex); //Expecting Output : 0 I am l ...

Ways to switch the positions of two characters in a text box

Is there a way to access the text content of a textarea and swap the two characters around the cursor using Javascript? I am interested in creating a Chrome extension that will allow me to quickly correct typos in Gmail. (I am assuming that the main editin ...

Retrieve content inside an iframe within the parent container

Hey there! I've been working on adding several iframes to my webpage. Each iframe contains only one value, and I'm trying to retrieve that value from the parent page. Despite exploring various solutions on Stack Overflow, none of them seem to be ...

Creating and sending an email using a contact form in Create-React-App

Currently, I am in the process of developing a website using create-react-app from GitHub. My next task is to create a contact page where user information will be submitted and sent to a designated email address. However, my lack of experience with back-e ...