Vuejs – Converting a String to Object – Vuejs string to object Parsing JSON

Vuejs – Converting a String to Object – Vuejs string to object Parsing JSON

Vuejs object to json

We pass an simple object as the second data parameter to using this method. It has properties of template, props, data, and methods or function and Present a form to enter a simple haystack and keyword(s) to search

How to convert a json string to an object

index.html

<div id="demo">
  <h1>Latest Vue.js products</h1>
  <template v-for="level in datanms">
    <input type="radio"
      :id="level"
      :value="level"
      name="level"
      v-model="newcpost">
    <label :for="level">{{ level }}</label>
  </template>
  <p>vuejs/[email protected]{{ newcpost }}</p>
  <ul>
    <li v-for="datarec in products">
      <a :href="datarec.html_url" target="_blank" class="commit">{{ datarec.sha.slice(0, 7) }}</a>
      - <span class="message">{{ datarec.commit.message | truncate }}</span><br>
      by <span class="author"><a :href="datarec.author.html_url" target="_blank">{{ datarec.commit.author.name }}</a></span>
      at <span class="date">{{ datarec.commit.author.date | formatDate }}</span>
    </li>
  </ul>
</div>

index.js

var newurl = 'https://infinityknow.com/repos/vuejs/vue/products?per_page=3&sha='
var demo = new Vue({

  el: '#demo',

  data: {
    datanms: ['dsp', 'w3free'],
    newcpost: 'dsp',
    products: null
  },

  created: function () {
    this.getsdata()
  },

  watch: {
    newcpost: 'getsdata'
  },

  filters: {
    truncate: function (v) {
      var myline = v.indexOf('\n')
      return myline > 0 ? v.slice(0, myline) : v
    },
    formatDate: function (v) {
      return v.replace(/T|Z/g, ' ')
    }
  },

  methods: {
    getsdata: function () {
      var client = new XMLHttpRequest()
      var oldself = this
      client.open('GET', newurl + oldself.newcpost)
      client.onload = function () {
        oldself.products = JSON.parse(client.responseText)
        console.log(oldself.products[0].html_url)
      }
      client.send()
    }
  }
})

JSON.springify, JSON.parse, eval and maninulating the string

this.currentItem=JSON.stringify(strData);
this.currentItem=JSON.parse(strData);
this.currentItem=eval(strData);

Example

Vue.js object to json

JSON.parse(JSON.stringify(vm.$data))

var stringvalu= `{ 
    "id": "0",  
    "program_id": "Vuejs",   
    "program_name": "Vuejs II" ,
    "program_description" : "Vuejs II WORK",
}`

Empty data string is converted to object

this.currentItem = JSON.parse(stringvalu);

convert string to Dom in vuejs

Template

<div id="log">
    {{{getlibs}}}
</div>

script
------
Vue.component(...  , {
    template: ...  ,
    data: function () {
           return ...     
        }
    },
    computed: {           
        getlibs:function(){
            // return directly html
            var str="<div><p>Welcome -javascript</p></div>";
            return str;
        }
    },
    methods:{...}
});
		
this.list.forEach(function (obj) {
  obj.editMode = false;
});