How can I format this data into something Vue Js can read and write?

I am trying to load a set of accelerometer data into my vue js app so that I can plot the x and y coordinate points onto a graph. I started out by loading the data like this

import Acc from "../TEST_DATA/acc";

I got the error

ERROR in ./TEST_DATA/acc.json
Module build failed: Error: ENOENT: no such file or directory, open '/mnt/c/Users/brenn/OneDrive/Desktop/Folders/code/Floormap-app/floormap/TEST_DATA/acc.json'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 14:0-35
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

DATA FORMAT

{"time":"2020-09-01 13:43:52","acc":[0.084869384765625,2.9331207275390625,9.295639038085938]}
{"time":"2020-09-01 13:43:52","acc":[0.4720611572265625,2.5552520751953125,9.557861328125]}
{"time":"2020-09-01 13:43:52","acc":[0.443389892578125,2.306732177734375,9.475082397460938]}
{"time":"2020-09-01 13:43:52","acc":[0.5052337646484375,2.26214599609375,9.519134521484375]}
{"time":"2020-09-01 13:43:53","acc":[0.5268402099609375,2.266632080078125,9.568099975585938]}
{"time":"2020-09-01 13:43:53","acc":[0.3914947509765625,2.3137359619140625,9.50543212890625]}
{"time":"2020-09-01 13:43:53","acc":[0.4478302001953125,2.31158447265625,9.463180541992188]}
{"time":"2020-09-01 13:43:53","acc":[0.4195709228515625,2.37359619140625,9.527877807617188]}

Where the "time" can be ignored for how and the

"mag":[X-coordinate, y-coordinate, z-coordinate]

This then made me realize that the data needs to come in a .json or .csv format instead of .txt. However the acc.txt file does not contain comma-separated values or the proper json format. The file sizes are quite large and I can not insert a comma between 1000-50000 data points everytime the data updates. Would it be possible to run the code through some sort of online converter or create a reformat function in my program? If so if someone could point me in the right direction that would be awsome. Thank you for any help.

Solution

I think it would be better to reformat your data before serving it to your app .

1 - Reformat your data into JSON

create a script.js file that later you will execute with node script.js . Basically your script need to do a find a replace in a file like replace } by }, and add a [ at the begining and a ] at the end. There some good node libraries to do that : Replace a string in a file with nodejs.

2 - (optional) cherry pick only what you need.

Now that you have a valid .json, you can parse it and reformat your data as you like. You can do that as a 2nd step in the same script, thus your final file will be lighter

3 - loading the JSON

There is 2 options here:

as you did with import Acc from "../TEST_DATA/acc.json"; with the inconvenience of a big final bundle and the need to redeploy for each data change.
Load it with an ajax request. A bit more coding but more manageable in the end.

PS: I'm not too worried about an array of 50000 entries, the difficult part is to display those 50000 points X)