We Keep Coding

JSON to Excel in JavaScript

I am trying to save data in json to excel .xlsx file. Json looks like this(with changing value names, this is just an example):
{"hum_in":[{"ts":1646034284215,"value":"22"},{"ts":1646033983313,"value":"22"}]}
I tried converting and downloading using this code:
const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';
function downloadAsExcel(data) {
const worksheet = XLSX.utils.json_to_sheet(data);
const workbook = {
Sheets: {
'data': worksheet
},
SheetNames: ['data']
};
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
console.log(excelBuffer);
saveAsExcel(excelBuffer);
}
function saveAsExcel(buffer) {
const data = new Blob([buffer], { type: EXCEL_TYPE });
saveAs(data, "Export_" + new Date().getTime() + EXCEL_EXTENSION);
}
and then calling it like this:
downloadAsExcel(json);
It returned an error:
TypeError: r.forEach is not a function
at rb (xlsx.full.min.js:23:18346)
at Object.tb [as json_to_sheet] (xlsx.full.min.js:23:19000)
at downloadAsExcel (app.js:233:34)
at app.js:112:25
Does anyone have any idea what's gone wrong?

The json_to_sheet function takes in an Array, whereas your data argument is an Object. Instead pass it the hum_in property to target the internal data array:
const worksheet = XLSX.utils.json_to_sheet(data.hum_in);
Here's a more complete example including support for multiple keys in the data object:
const data = {"hum_in":[
{"ts":1646034284215,"value":"22"},
{"ts":1646033983313,"value":"22"}
]};
function generateAsExcel(data) {
try {
const workbook = XLSX.utils.book_new();
for (let key in data) {
const worksheet = XLSX.utils.json_to_sheet(data[key]);
XLSX.utils.book_append_sheet(workbook, worksheet, key);
}
let res = XLSX.write(workbook, { type: "array" });
console.log(`${res.byteLength} bytes generated`);
} catch (err) {
console.log("Error:", err);
}
}
document.getElementById("gen").addEventListener("click",
() => generateAsExcel(data));
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
<button id="gen">Generate</button>
To combine all the data keys into a dataset to generate a single worksheet from, you can use something like this:
const data = {
"hum_in":[ {"ts":1646034284215,"value":"22"}, {"ts":1646033983313,"value":"22"} ],
"wind_dir":[ {"ts":1646034284215,"value":"123"}, {"ts":1646033983313,"value":"125"} ]
};
let merged = Object.keys(data).reduce((merged, key) => {
for (record of data[key]) { merged.push(Object.assign({ key }, record)); }
return merged;
}, []);
console.log(merged);

SheetJS XLSX.read ends up with Page Unresponsive

I am trying to read a xlsx file that has a size of 3000KB and convert it to JSON using SheetJS, but when I read the file I seem to get a chrome 'Page Unresponsive error', clicking wait on the error everytime I upload a file is not ideal.
How can I resolve this issue?
onChange(event) {
this.file = event.target.files ? event.target.files[0] : null;
this.uploaded = true;
const reader = new FileReader();
reader.readAsArrayBuffer(this.file);
reader.onload = function () {
const data = new Uint8Array(reader.result);
const wb = XLSX.read(data, { type: 'array', sheets: ['Sheet1', 'Sheet2'] });
this.summary = XLSX.utils.sheet_to_json(wb.Sheets.Summary);
this.weeklyDetails = XLSX.utils.sheet_to_json(wb.Sheets['Weekly Details']);
console.log(this.weeklyDetails);
};
},

Images put to storage are saved as 'octet-stream' rather than image/jpeg (firebase and ReactNative)

I am using the camera(react-native-image-Picker) to take a pick and save it to storage.
Here is how I am doing it.
const saveImage = async () => {
const id = firebase.firestore().collection('food').doc().id
const storageRef = firebase.storage().ref()
const fileRef = storageRef.child(file.fileName) //name of image to store
await fileRef.put(file) //store image
firebase.firestore().collection("food").doc(id).update({
image: firebase.firestore.FieldValue.arrayUnion({
name: file.fileName,
url: await fileRef.getDownloadURL()
})
})
}
console.log(typeof file);
gives => "object"
console.log(file);
//gives =>
file = {height: 2322,
uri:"content://com.photodocumentation.imagepickerprovidlib_temp_7a0448df-1fac-4ac7-a47c-402c62ecce4c.jpg",
width: 4128,
fileName: "rn_image_picker_lib_temp_7a0448df-1fac-4ac7-a47c-402c62ecce4c.jpg",
type: "image/jpeg"}
Results:
In Firebase (storage) The image is being saved as application/octet-stream instead of image/jpeg.
The image is not shown, it says undefined when downloaded from storage.
Any help will be so appreciated.

This is how I was able to fix it:
const uploadImage = async () => {
const response = await fetch(file.uri)
const blob = await response.blob();
var ref = firebase.storage().ref().child("FolderName");
return ref.put(blob)
}

The Reference#put() method accepts a Blob, Uint8Array or ArrayBuffer. Your "file" object doesn't appear to be any of these.
Instead, we need to read the file into memory (using react-native-fs - referred to as RNFS) and then upload that data along with the required metadata. Because the file is read as base64 by RNFS, we will use Reference#putString instead as it accepts Base64 strings for uploads.
const rnfs = require('react-native-fs');
const saveImage = async () => {
const capture = /* this is your "file" object, renamed as it's not a `File` object */
const fileRef = firebase.storage().ref(capture.fileName);
const captureBase64Data = await rnfs.readFile(capture.uri, 'base64');
const uploadSnapshot = await fileRef.putString(captureBase64Data, 'base64', {
contentType: capture.type,
customMetadata: {
height: capture.height,
width: capture.width
}
});
// const id = colRef.doc().id and colRef.doc(id).update() can be replaced with just colRef.add() (colRef being a CollectionReference)
return await firebase.firestore().collection('food').add({
image: {
name: capture.fileName,
url: await fileRef.getDownloadURL()
}
});
};

Solution: Image reference in uploadBytesResumable() method
const storageRef = ref(storage,`product-images/${image.name}`);
uploadBytesResumable(storageRef,image);

Why are dates convert to different format when parsed?

I am using the xlsx to parse .xls files.
I am having an issue with the date format being different after parsing the file and would like to know why, and perhaps how to fix it?
Here is an example file that I have been working with, it is only 3 lines long.
here the code I have so far
import React, { Component } from 'react';
import { render } from 'react-dom';
import XLSX from "xlsx";
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
xslToJson = workbook => {
var data = [];
var sheet_name_list = workbook.SheetNames;
return XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[0]], {raw: false});
};
handleFile = (file /*:File*/) => {
/* Boilerplate to set up FileReader */
const reader = new FileReader();
const rABS = !!reader.readAsBinaryString;
reader.onload = e => {
/* Parse data */
const bstr = e.target.result;
const wb = XLSX.read(bstr, { type: rABS ? "binary" : "array" });
/* Get first worksheet */
let arr = this.xslToJson(wb);
console.log(arr)
};
if (rABS) reader.readAsBinaryString(file);
else reader.readAsArrayBuffer(file);
};
handleChange = (e) => {
const files = e.target.files;
if (files && files[0]) {
this.handleFile(files[0]);
}
};
render() {
return (
<div>
<input
type="file"
onChange={this.handleChange}
className="inputfile"
id="embedpollfileinput"
/>
</div>
);
}
}
render(<App />, document.getElementById('root'));
in my xsl file, DD/MM/YYYY format is present.but when i parse xls file it shows me in MM/DD/YY
xslToJson = workbook => {
var data = [];
var sheet_name_list = workbook.SheetNames;
return XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[0]], {raw: false});
};
handleFile = (file /*:File*/) => {
/* Boilerplate to set up FileReader */
const reader = new FileReader();
const rABS = !!reader.readAsBinaryString;
reader.onload = e => {
/* Parse data */
const bstr = e.target.result;
const wb = XLSX.read(bstr, { type: rABS ? "binary" : "array" });
/* Get first worksheet */
let arr = this.xslToJson(wb);
console.log(arr)
};
if (rABS) reader.readAsBinaryString(file);
else reader.readAsArrayBuffer(file);
};

Reading multiple files with FileReader using .map()

I have array of files and I need to format the file to json (object at this point) with bunch of other info. Here's what I have tried
const uploadData = Files.map((file) => {
const fr = new FileReader();
fr.readAsArrayBuffer(file);
fr.onload = (event) =>{
const fileData = event.target.result;
return {
query:{
documentName: file.name,
personId: personId,
serviceId: serviceID,
documentFile: fileData,
}
}
}
})
I want to use immutable techniques. I do have a guess why this doesn't work but have no idea how to fix it. I Think .map does not wait for filereader to read and thus returns only array of undefined values. I tried to use IIFE but was unsuccessfull.

const uploadData = [],
Files.forEach((file) => {
const fr = new FileReader();
fr.readAsArrayBuffer(file);
fr.onload = (event) =>{
const fileData = event.target.result;
uploadData.push(query:{
documentName: file.name,
personId: personId,
serviceId: serviceID,
documentFile: fileData,
})
}
})
Since return is occuring in the callback , you should use local var and push the data