Transform XLS files into JSON format seamlessly by leveraging the power of Sheetjs and FileReader.js

I have been attempting to transform an uploaded XLSX file into JSON format using https://github.com/bgrins/filereader.js for handling the upload process and https://github.com/SheetJS for the actual conversion of the file. Below is the code I am currently using:

var opts = {
  dragClass : 'drag',
  on: {
    load: function(e, file) {
        var result      = e.target.result;
        var xlsread     = XLSX.read(result, {type: 'binary'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(opts);

Despite this code, all I seem to receive is an empty array in return.

Does anyone have any suggestions or tips on how to solve this issue?

javascriptjsonxlsxfilereadersheetjs

Answer №1

After some trial and error, I managed to solve the issue by setting the output as an Array Buffer. Here is the updated code:

var options = {
  readAsDefault: 'ArrayBuffer',
    dragClass : 'drag',
    on: {
    load: function(event, file) {
        var result      = new Uint8Array(event.target.result);
        var xlsread     = XLSX.read(result, {type: 'array'});
        var xlsjson     = XLSX.utils.sheet_to_json(xlsread.Sheets.Sheet1);
        console.log(xlsread,xlsjson);
    }
  }
};

$("#file-input, #dropzone").fileReaderJS(options);

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

Obtaining a JSON value from a JSON array column in PostgreSQL: A guide

I have a column that is of character varying type. Within this column, there is a JSON array. Here is an example: [ {"name":"Peter", "information":{"tel":"120391083", "address":"xxx"}} ...

sqljsonpostgresql

Tips for sending JSON information

My Android platform requires me to send a large amount of JSON data to a server. I am considering whether it would be beneficial to split the data into smaller packets or send it all at once. Additionally, I am wondering if running the sending code in a ...

androidjson

Passing a JSON or dictionary variable to an operator in Airflow: A practical guide

I am struggling to find a way to successfully pass a registered dictionary as a variable in the parameters of an operator to launch a databricks notebook. Despite my attempts, I have not been able to make it work. Here is an example of the variable saved ...

jsonpython-3.xvariablesjinja2jinja2-cli

Tips for improving the efficiency of JSON responses for quicker request times

On my index.html page, I initiate an ajax call to fetch JSON data and upon successful retrieval, I pass the JSON to other functions. $.ajax({ type : "GET", url : 'get_data', dataType : 'json', success: function(data) { ...

jqueryruby-on-railsajaxjsonruby-on-rails-4

Stop javascript function from automatically invoking itself

I am new to php and javascript and currently working on using a session variable to keep track of a counter. I want the counter to increment on the next button click and decrement on the previous button click. The issue I'm facing is with the JavaScri ...

javascriptphphtml

Enhancing the javascript console output

Take a look at this demonstration: const y = "bar"; console.log(y); => y: bar Is there a way to modify console.log() or use a library like npm package to enhance its functionality? ...

javascriptloggingconsolenpm

Is there potentially a memory leak in this code? If there is, what steps can be taken to eliminate it?

Recently I inherited a project from my senior colleagues that focused on seamless page reloading using AJAX. The code is filled with numerous functions like this one: function iCreateProblems() { //some random code document.getElement ...

javascriptajaxmemory-leaks

A guide on retrieving a large amount of JSON data in a RESTful web service with Java, Tomcat, and Eclipse

Within this context, there are several paragraphs discussing the utilization of Java, RESTful services, Tomcat, and Eclipse... If you're interested, you can access the JSON data by clicking [here] The individual is demonstrating how to retrieve JSO ...

javaandroidjsoneclipsetomcat

Issue encountered while attempting to animate a spherical object within a confined space in Three.js

I'm fairly new to three.js and encountering issues while attempting to animate a sphere moving through a space. My approach involves creating a new sphere and using new THREE.Vector3().randomDirection() to set it in motion. The sphere is meant to mov ...

javascriptthree.js

Executing a POST request with AJAX in jQuery to communicate across different domains and fetching XML data as

Is it possible to send an AJAX request using the POST method and receive XML as a response text? If so, please provide me with the steps to achieve this. For example: url : "http://www.webservicex.net/CurrencyConvertor.asmx/ConversionRate" data ...

javascriptjqueryajaxjquery-events

Viewing JSON or XML responses in API in a visually friendly manner. Utilizing Yii2 framework

When looking at the response from an API in guides, it appears in a readable view. I'm trying to figure out if this formatting is just for displaying the response structure, or if there's a way to actually generate a readable view. For example, ...

phpjsonyii2

The designated redirection path, as indicated in the 'next.config.js' file for a particular project, has now been applied to all projects

Something strange is happening... I set a redirect path for the root index page in one of my projects and it worked perfectly, but now all of my other projects are also being redirected to that same path when I try to visit localhost:3000. It's alway ...

javascriptnode.jsnext.jsnext-router

Utilizing JSON parse/stringify for data manipulation

I'm seeking advice on manipulating JSON data using JavaScript, particularly with the stringify/parse methods. In this scenario, I start by creating a JSON string and then use parse to convert it into an object. However, my goal is to efficiently delet ...

javascriptjson

Utilizing ng For in a personalized directive to fill a selection menu

I encountered an issue while trying to populate a selected dropdown using ngRepeat inside a custom directive. I came across this example that seemed similar to what I wanted to achieve here. Although it worked for the example, it didn't work for me. ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat

Looking to establish a minimum height for a webpage

I am working on creating a webpage with three distinct sections: A fixed height header A fluid main section A fixed height footer My goal is to ensure that the page has a minimum height so that the bottom of the footer aligns with the bottom of the wind ...

javascripthtmlcss

Sails.js encounters issues initializing Passport.js when SSL is implemented

Currently utilizing Sails.js (v0.9.4) and passport(local strategy) with no issues. The need arises to configure Sails.js behind SSL. Therefore, the setup includes: (Port 8080 selected for SSL). Upon starting Sails, it responds correctly, except for those ...

javascriptnode.jsexpresssails.jspassport.js

MUI Chips serving as selectible tags with checkbox-like functionality

I have retrieved data from a JSON file containing information about different types of chips: [ { "id": "4", "name": "Caucasian" }, { "id": "5", "name": "Asian" }, ...

reactjsjsontypescriptmaterial-ui

Tips for creating a sophisticated state transition diagram using Typescript

If you have a creative idea for a new title, feel free to make changes! I have two enums set up like this: enum State { A = "A", B = "B", C = "C" } enum Event { X = "X", Y = "Y", Z ...

javascripttypescript

Dealing with non-string values (such as Date, Double, Boolean) when creating JSON through iterative mapping with Map and Object Array in Scala

How can I handle non-string values (Date, Double, Boolean) when building JSON in Scala by looping with Map and Object Array? In the following example, I always end up with non-string values as strings in the Values Array. import play.api.libs.json._ impor ...

javaarraysjsonstringscala

Ways to prompt app.js to invoke an external package

Getting started with a new project. The hosting service I'm using is Passenger, which requires app.js to be in a specific location to work properly. Redux recommends organizing files in self-contained folders. How can I ensure that app.js points to t ...

javascriptnode.jsreduxpassenger