javascript - 无法获得正确的 JSON 格式，相反我搞砸了

Question

我想要什么？

问得好，不是吗？出色地... 我正在开发一个使用 electron-vue 计算预算的应用程序。 在我的应用程序中，我尝试将用户保存在一个 JSON 文件中，以便在应用程序重启后创造一个保留他们的机会。

JSON 文件应如下所示:

{
    "deniz": {
        "salary": 1234,
    },
    "hüseyin": {
        "salary": 4321,
    }
}

---

我得到了什么？

我得到的是这个:

{
    "deniz": {
        "salary": 1234
    }
}{
    "hüseyin": {
        "salary": 4321
    }
}

问题是，它是错误的 JSON 格式。我正在一个对象中创建一个全新的对象。

---

我该怎么做？

我创建了一个 userDataControllerMixin.js 来将逻辑与其自身的组件分开。

我的组件中有两个 InputFields，1.userName 和 2.userSalary 用于收集用户数据。

在我的 userDataControllerMixin.js 中:

export const userDataControllerMixin = {
  data() {
    return {
      userDataAbsPath: 'src/data/userData.json',
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    // FETCH THE userData.json
    getUsers() {
      const fs = require('fs');
      const loadJSON = fs.readFile('src/data/userData.json', 'utf8', (err, data) => {
        if (err) {
          console.log(`failed to read file: ${err}`);
        }
        // console.log(data);
      });
      return loadJSON;
    },
    // USING THIS CONSTRUCTOR TO BUILD A JSON FORMAT
    User(user, salary) {
      this[user] = {
        salary: Number(salary),
      };

      return user;
    },
    // GET INPUT FROM USERS INPUTBOX
    getInput(inputName, inputSalary) {
      const userName = this.inputName;
      const userSalary = this.inputSalary;
      const user = new this.User(userName, userSalary);
      console.log(user);
      this.createOrLoadJSON(user);
    },
    // CREATES A JSON WITH DATA FROM THE USERS
    createOrLoadJSON(data) {
      const fs = require('fs');
      const json = JSON.stringify(data, null, 4);

      if (fs.existsSync(this.userDataAbsPath)) {
        console.log('file exists!');
        fs.appendFileSync(this.userDataAbsPath, json);
      } else {
        console.log('file not exists!');
        fs.writeFile(this.userDataAbsPath, json, (error) => {
          if (error !== null) {
            console.log(error);
          }
        });
      }
      this.postUsers();
    },
    // PRINTS DATA FROM userData.json TO DOM
    postUsers() {

    },
  },
};

---

我该如何解决这个问题？

Answer 1

问题是，appendFile 方法不是 concat 方法。它只是一个接一个地添加一些文本。

你必须先用 Object.assign 连接你的 json。

createOrLoadJSON(data) {
  const fs = require('fs');

  if (fs.existsSync(this.userDataAbsPath)) {
    console.log('file exists!');
    const existingJSON = fs.readFileSync(this.userDataAbsPath, "utf8"); // read file and return encoded value
    const newJSON = Object.assign(JSON.parse(existingJSON), data); // concatenate file value and new data
    fs.writeFile(this.userDataAbsPath, JSON.stringify(newJSON, null, 4)); // rewrite file
  } else {
    console.log('file not exists!');
    fs.writeFile(this.userDataAbsPath, JSON.stringify(data, null, 4), (error) => { //  if file does not exist stringify data here
      if (error !== null) {
        console.log(error);
      }
    });
  }
  this.postUsers();
},

工作示例:

// proper concat with Object.assign
var assign = {
  foo: 'bar'
};
var assign2 = {
  bar: 'baz'
};

var assign3 = Object.assign(assign, assign2);
console.log('Object assign: ', assign3);

// appendFile look more like this
var append = {
  foo: 'bar'
};
var append2 = {
  bar: 'baz'
};
var append3 = JSON.stringify(append) + JSON.stringify(append2);
console.log('fs.appendFile: ', append3);