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: ['${', '}']
  });

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: ['${', '}']
  });

• javascript
• json
• object
• vue.js

• 2 Are you positive it's a JSON string and not an object already? Is this what you think it's supposed to be inside the buildResults definition? Should you have this.data.resultls instead? If this is supposed to be your resultsLi, then this.resultls and this.json are both undefined as they are a child of the data property. – Cᴏʀʏ Commented Mar 9, 2017 at 16:18
• i had convert the json object whit this code: coderesultsLi.resultls = JSON.stringify(tempList); code because the vue whatcher not detecting changes in the object when i add elements only if i convert the json in to json string – Brayan Caldera Commented Mar 9, 2017 at 16:21
• just do a console.log(typeof this.results) on the line before you call JSON.parse() if the result is 'object', then you don't need to call JSON.parse() – jessegavin Commented Mar 9, 2017 at 16:27
• I see the vue.js proxies the data object, so this.resultls would work. My remaining question then would be whether its value is what you think it is. – Cᴏʀʏ Commented Mar 9, 2017 at 16:27
• The json string that you post is already an object – todes Commented Mar 9, 2017 at 16:28

1 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 () {
   .....
}