How add new object to Object Vuejs

Question

I load the csv file. This file is loaded as one long string. I divide this string into rows (row). Then I want to split each line into an object and add an object (jsonConvert). However, when I try to add a new row as an object I get a message:

Error in v-on handler: "TypeError: this.jsonConvert.push is not a function".

<script>
export default {
  data() {
    return {
      csvData: "",
      jsonConvert: {},
      renderTable: false,
      uniqueCategory: [],
    };
  },
  methods: {
    onFileChange(e) {
      let files = e.target.files[0];

      let reader = new FileReader();
      reader.onload = (e) => (this.csvData = e.target.result.split("\n"));
      reader.readAsText(files);
    },
    parseToJSON() {
      let data = this.csvData;

      for (var i = 0; i < data.length; i++) {
        let row = [];
        row.push(data[i].split(","));
        const expense = new Object();

        expense.date = row[0][0];
        expense.category = row[0][2];
        expense.description = row[0][3];
        expense.amount = row[0][4];
        this.jsonConvert = this.jsonConvert.push(expense);
      }
      this.renderTable = true;
    },
  },
};
</script>

jsonConvert is an object, not an array, so it has no push method — Dan
– Dan, Commented Nov 23, 2020 at 13:03

Boussadjra Brahim · Accepted Answer · 2020-11-23 13:06:54Z

2

jsonConvert is an object that doesn't have the method push which a method of arrays, in order to add new records try to init jsonConvert as an array :

  data() {
    return {
      csvData: "",
      jsonConvert: [],
      renderTable: false,
      uniqueCategory: [],
    };
  },

then push without assigning :

  ...
  expense.date = row[0][0];
  expense.category = row[0][2];
   expense.description = row[0][3];
   expense.amount = row[0][4];
  this.jsonConvert.push(expense);

edited Nov 23, 2020 at 13:06

answered Nov 23, 2020 at 13:04

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kielstra Over a year ago

Aren't you just overriding the fields for every expense if you do it like this?

Collectives™ on Stack Overflow

How add new object to Object Vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related