I can't convert json string to object in Vue.js and javascript

Question

im trying to convert this json string to object, but i can't, the console this erro:

Uncaught SyntaxError: Unexpected end of JSON input

at JSON.parse (<anonymous>)
at Vue$3.buildResults (rolList.js:422)
at Vue$3.boundFn [as buildResults] (vue.js:141)
at Vue$3.mounted (rolList.js:418)
at callHook (vue.js:2768)
at Vue$3.Vue._mount (vue.js:2630)
at Vue$3.$mount (vue.js:6186)
at Vue$3.$mount (vue.js:8557)
at Vue$3.Vue._init (vue.js:3389)
at new Vue$3 (vue.js:3437)

The json string is this:

{"modulos":{"1":{"name":" Usuarios","paginas":{"1":{"name":" Listado Usuarios","facultades":{"1":{"name":" ver"}}}}}}}

The java script code is this:

  resultsLi = new Vue({
    el: '#result-list',
    data: {
      resultls: "",
      json: []
    },
    mounted: function () {
      this.buildResults();
    },
    methods: {
      buildResults: function(event) {
        this.json = JSON.parse(this.resultls);
        console.log(this.resultls);

      }
    },
    watch: {
      resultls: function(val, oldVal){
        this.buildResults();
      }
    },
    delimiters: ['${', '}']
  });

Answer 1

You are getting that error because on initial load, your resultls is an empty string. You can change it to be a blanket empty json so it will parse properly and will be updated in watch.

resultsLi = new Vue({
  el: '#result-list',
  data: {
    resultls: "{}",
    json: []
  },
  mounted: function () {
   .....
}