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?

Asaf · Accepted Answer · 2020-10-04T20:45:54.990

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" />

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

1 Answers1