如何将这些数据格式化为 Vue Js 可以读写的内容？

Question

我正在尝试将一组加速度计数据加载到我的 vue js 应用程序中，以便我可以将 x 和 y 坐标点绘制到图表上。我开始像这样加载数据

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

我收到错误消息

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

数据格式

{"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]}

对于如何以及

可以忽略“时间”的地方

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

这让我意识到数据需要采用 .json 或 .csv 格式，而不是 .txt。但是 acc.txt 文件不包含逗号分隔值或正确的 json 格式。文件非常大，每次数据更新时我都不能在 1000-50000 个数据点之间插入逗号。是否可以通过某种在线转换器运行代码或在我的程序中创建重新格式化功能？如果是这样，如果有人能指出我正确的方向，那就太棒了。感谢您的帮助。

Answer 1

我认为最好在将数据提供给您的应用程序之前重新格式化数据。

1 - 将您的数据重新格式化为 JSON

创建一个 script.js 文件，稍后您将使用该文件执行 node script.js。基本上，您的脚本需要在文件中查找替换，例如将 } 替换为 },，并在开头添加 [，在结尾添加 ]。有一些很好的节点库可以做到这一点：Replace a string in a file with nodejs.

2 -（可选）只挑选您需要的东西。

现在您有了一个有效的 .json，您可以解析它并根据需要重新格式化您的数据。您可以在同一脚本中将其作为第二步执行，因此您的最终文件会更轻

3 - 加载 JSON

这里有2个选项：

就像您对 import Acc from "../TEST_DATA/acc.json"; 所做的那样，最终捆绑包很大，带来的不便以及每次数据更改都需要重新部署。
使用 ajax 请求加载它。编码多一点，但最终更易于管理。

PS：我不太担心50000个条目的数组，困难的部分是显示那50000个点X)

如何将这些数据格式化为 Vue Js 可以读写的内容？

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

accelerometer

vue.js

1 - 将您的数据重新格式化为 JSON

2 -（可选）只挑选您需要的东西。

3 - 加载 JSON