我在將新的動態資料附加到 JSON 檔案時遇到了一些麻煩。總結一下我的專案，我從/new頁面的輸入表單中獲取 projectName。然后我的 API 使用 node.js 的 fs 模塊創建一個新的 JSON 檔案，然后我可以在后續請求時將新的動態資料附加到我的表單。變數是 1) projectName (取自我的表單), 2) activeUser (通過環境變數編程), 3) 是我通過時間戳變數獲取的請求日期：
const timestamp = (JSON.parse(JSON.stringify(new Date())));
對于 2 個后續請求，所有這三個變數似乎都正確列印，然后在第三個表單提交時，似乎沒有新資料附加到 JSON 檔案。但是我對 node.js 比較陌生，我似乎無法弄清楚我在哪里搞砸了。
這是我的 API
頁面/api/demos/index.js
import dbConnect from '../../../lib/dbConnect';
import Demo from '../../../models/Demo';
import fs from 'fs';
export default async function handler(req, res) {
const {
query: { id },
method,
} = req
await dbConnect()
switch (method) {
case 'POST':
try {
//check if file exist
if (!fs.existsSync('projects.json')) {
//create new file if not exist
fs.closeSync(fs.openSync('projects.json', 'w'));
}
// read file
const timestamp = (JSON.parse(JSON.stringify(new Date())));
const newFileName = req.body.projectName;
const activeUser = process.env.ACTIVE_USERNAME;
const file = fs.readFileSync('projects.json')
const data = {
"projects": [
{
"username": activeUser,
"pages": [
{
"display": "routes",
"subpages": [
{
"date": timestamp,
"route": newFileName,
"display": newFileName
}
]
}
]
}
]
}
//check if file is empty
if (file.length == 0) {
//add data to json file
fs.writeFileSync("projects.json", JSON.stringify([data]))
} else {
//append data to jso file
const json = JSON.parse(file.toString())
//add json element to json object
json.push(data);
fs.appendFileSync("projects.json", JSON.stringify(data))
}
const demo = await Demo.create(
req.body
)
res.status(201).json({ success: true, data: demo })
} catch (error) {
res.status(400).json({ success: false })
}
break
default:
res.status(400).json({ success: false })
break
}
}
第一次提交表單后，我的 JSON 檔案projects.json看起來像
[
{
"projects": [
{
"username": "projectmikey",
"pages": [
{
"display": "routes",
"subpages": [
{
"date": "2022-09-12T19:03:09.547Z",
"route": "1",
"display": "1"
}
]
}
]
}
]
}
]
然后在第二次提交表單之后
[
{
"projects": [
{
"username": "projectmikey",
"pages": [
{
"display": "routes",
"subpages": [
{
"date": "2022-09-12T19:03:09.547Z",
"route": "1",
"display": "1"
}
]
}
]
}
]
}
]{
"projects": [
{
"username": "projectmikey",
"pages": [
{
"display": "routes",
"subpages": [
{
"date": "2022-09-12T19:03:24.466Z",
"route": "2",
"display": "2"
}
]
}
]
}
]
}
奇怪的是，它似乎適用于兩個表單提交，然后資料停止附加到我的檔案中。這是第三次嘗試之后，（檔案沒有變化）
[
{
"projects": [
{
"username": "projectmikey",
"pages": [
{
"display": "routes",
"subpages": [
{
"date": "2022-09-12T19:03:09.547Z",
"route": "1",
"display": "1"
}
]
}
]
}
]
}
]{
"projects": [
{
"username": "projectmikey",
"pages": [
{
"display": "routes",
"subpages": [
{
"date": "2022-09-12T19:03:24.466Z",
"route": "2",
"display": "2"
}
]
}
]
}
]
}
當我洗掉初始 JSON 物件周圍的一對括號時，它似乎根本停止作業。我指的是 fs.writeFileSync("projects.json", JSON.stringify([data]))
我真的可以用另一雙眼睛看這個，這樣我就可以看到我在哪里搞砸了！大聲笑提前感謝您的時間...
uj5u.com熱心網友回復：
雖然感覺像是在“附加”到檔案中，但實際上你在做一些更復雜的事情。
例如在狀態之前：
[ "one", "two" ]
所需的后狀態：
[ "one", "two", "three" ]
請注意，您不能只將文本附加到狀態前的 JSON，因為已經存在]終止整個物件的討厭的東西。
一些失敗的嘗試可能如下所示：
嘗試追加另一個整個陣列失敗
[ "one", "two" ][ "three" ]
這是無效的，因為有兩個根物件。
嘗試僅附加陣列的其余部分失敗
[ "one", "two" ], "three" ]
那也不好。原始]檔案末尾的 需要被覆寫或洗掉，因此無法僅追加。我想從技術上講，您可以尋找決賽的位置，]然后從那里繼續寫一個不完整的物件。但是，]從源中洗掉 final 并[從您嘗試附加的塊中洗掉首字母是非常尷尬的。這只是一個困難的方法。
你真正想做的是：
- 讀取整個 JSON 檔案
- 將 JSON 決議為 JavaScript 物件（如果檔案不存在，則創建一個空物件）
- 根據需要修改 JavaScript 物件（例如
push到陣列中添加另一個元素） - 將 JavaScript 物件字串化為新的 JSON
- 用新的 JSON 覆寫整個檔案。
/* In Node.js:
const fs = require('fs');
try {
initialJSON = fs.readFileSync('example.json');
} catch (ignore) {
initialJSON = '[]';
}
*/
/* Mocked for this example: */
initialJSON = '["one","two"]';
// Common
obj = JSON.parse(initialJSON);
obj.push("three");
finalJSON = JSON.stringify(obj);
/* In Node.js:
fs.writeFileSync('example.json', finalJSON);
*/
/* Mocked for this example: */
console.log(finalJSON);轉載請註明出處，本文鏈接：https://www.uj5u.com/net/506391.html
標籤：javascript 节点.js 反应 json 下一个.js
上一篇：如果輸入已填充，則反應啟用按鈕
下一篇：單擊另一個選項卡時關閉的手風琴