How to read a text file into an array of objects in JavaScript

Question

I am having trouble finding the best way to tackle my problem. I would like to read a text file into an array of objects. The format of the array is fixed, but if there is a format for the text file that would be better, then that is possible.

The text file I currently have has the following structure:

item_tag = milk
item_date = 2020年10月25日
item_quantity = 1
*
item_tag = egg
item_date = 2020年10月04日
item_quantity = 3
*
item_tag = banana
item_date = 2020年10月03日
item_quantity = 2
*
item_tag = apple
item_date = 2020年10月10日
item_quantity = 1
*
item_tag = yoghurt
item_date = 2020年10月31日
item_quantity = 5
*

Each object has three properties and each object is separated by an *. Again, this is a format that I thought could be useful, but I'm open to suggestions.

I would like to turn it into an array structured like this:

let Inventory = [
 {"item_name": "milk", "item_date": "2020年10月25日", "item_quantity": 1},
 {"item_name": "egg", "item_date": "2020年10月04日", "item_quantity": 3},
 {"item_name": "banana", "item_date": "2020年10月03日", "item_quantity": 2},
 {"item_name": "apple", "item_date": "2020年10月10日", "item_quantity": 1},
 {"item_name": "yoghurt", "item_date": "2020年10月31日", "item_quantity": 5}
];

I have seen other questions like this (e.g. this and this), but these are not for an array of objects. These solutions also both use Node.JS, I would prefer not to use Node unless it's necessary. I have seen this, where another method is used without Node. I am able to display the text using this code from that thread:

document.getElementById('inputfile').addEventListener('change', function() { 
 
var fr = new FileReader(); 
fr.onload = function(){ 
 document.getElementById('output') 
 .textContent=fr.result; 
} 
fr.readAsText(this.files[0]); 
}) 

If possible, how could I modify this to turn the text into an array of objects?

Thanks for any help!

On a side note, is it also possible to turn the array (now modified) back into a text file?

Answer 1

Start with spliting the lines with .split("\r\n") and then add the objects using shift() to pop out the lines until the array emptied. The code snippet produces the below array:

[
 {
 "tag": "milk",
 "date": "2020年10月25日",
 "quantity": "1"
 },
 {
 "tag": "egg",
 "date": "2020年10月04日",
 "quantity": "3"
 },
 {
 "tag": "banana",
 "date": "2020年10月03日",
 "quantity": "2"
 },
 {
 "tag": "apple",
 "date": "2020年10月10日",
 "quantity": "1"
 },
 {
 "tag": "yoghurt",
 "date": "2020年10月31日",
 "quantity": "5"
 }
]

document.getElementById('inputfile').addEventListener('change', function() { 
 var fr = new FileReader(); 
 fr.onload = function(e){ 
 var res = []; 
 var lines = this.result.split("\r\n");
 while(lines.length > 0){ 
 res.push({
 tag: getField(lines),
 date: getField(lines),
 quantity: getField(lines),
 });
 if(lines[0] == '*') lines.shift();
 }
 console.log(res);
 } 
 fr.readAsText(this.files[0]); 
})
function getField(lines){
 return lines.shift().split(' = ')[1];
}

<input id="inputfile" type="file" value="upload" />