nickdavies07
2 months ago
311
3
Vue

JSON Parse Error - Vue

Posted 2 months ago by nickdavies07

I'm trying to load reports dynamically through JSON stored in a table using Laravel, Vue and Stimulsoft Report JS.

I'm using the example on the GitHub page here:- https://github.com/stimulsoft/Samples-JS/tree/master/Vue.js/02.%20Working%20with%20report%20viewer

This is my Vue file...

<template>
  <div id="app">
    <div>
      <h2>Reports</h2>
      <div id="viewer"></div>
    </div>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'app',
  data () {
    return {
      definition: ''
    }
  },
  mounted: function() {
  
    let response = axios.get('/reports/view/1')
    
    this.definition = response['data'].report.definition
    
    var viewer = new window.Stimulsoft.Viewer.StiViewer(null, 'StiViewer', false);
    
    var report = new window.Stimulsoft.Report.StiReport();

    report.load(this.definition);

    viewer.report = report;

    viewer.renderHtml('viewer');
  }
}
</script>

<style>

</style>

However, when I swap out using loadFile() for load() in the example (as per the documentation) and use the JSON definition stored in my database I get a JSON.parse: unexpected end of data at line 1 column 1 of the JSON data error.

The JSON is a valid JSON object, confirmed this by using https://jsonlint.com/

I know this may not strictly be an issue with Vue/Laravel but I thought I'd ask here anyway and would be grateful if anyone could help!

Please sign in or create an account to participate in this conversation.