CODEWITHSUNDEEP
javascriptjsonvue.js
Deniz
Deniz

Reputation: 1503

can't get a correct JSON format, instead i am messing up

What do i want?

good question, isn't it? Well... I am working on a application to calculate budgets with electron-vue. In my App i try to save the users in a JSON file to create a opportunity to hold them after a application restart.

the JSON File should look like this:

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

What do i get?

I am getting this instead:

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

Problem is, its a wrong JSON format. I am creating a whole new obj inside a obj.

How am i doing this?

I created a userDataControllerMixin.js to separate the logic from the component it self.

I have two InputFields in my component, 1.userName and 2.userSalary to collect the user data.

Inside my 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() {

    },
  },
};

How can i fix this?

Upvotes: 1

Views: 84

Answers (1)

Pierre Burton
Pierre Burton

Reputation: 2084

Problem is, appendFile method is no concat method. It just add some text after another.

You must concat your json with Object.assign first.

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();
},

Working example:

// 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);

Upvotes: 1

Related Questions