CODEWITHSUNDEEP
javascriptjsonmustache
hcdocs
hcdocs

Reputation: 1299

JavaScript script won't load contents of a JSON file to process

I am trying to load a JSON file into a JavaScript script for use in a Mustache script on a webpage. The JSON in a string loads correctly, but the same JSON in a file does not.

This works:

function renderHello() {
  var json = JSON.parse('{"cloudy": "This applies to Snowflake.","classic": "This applies to SQL Server."}');
  var template = document.getElementById("template").innerHTML;
  var rendered = Mustache.render(template, json);
  document.getElementById("target").innerHTML = rendered;
}

This does not work:

function renderHello() {
  var json = JSON.parse('./abc.json');
  var template = document.getElementById("template").innerHTML;
  var rendered = Mustache.render(template, json);
  document.getElementById("target").innerHTML = rendered;
}

Variations I've tried in abc.json:

{
    "cloudy": "This applies to Snowflake.",
    "classic": "This applies to SQL Server."
}

{"cloudy": "This applies to Snowflake.","classic": "This applies to SQL Server."}

I've unsuccessfully tried

var json = './abc.json';

var json = JSON.parse('./abc.json');

var json = JSON.stringify('./abc.json');

var json = JSON.parse(JSON.parse('./abc.json'));

var json = JSON.parse(JSON.stringify('./abc.json'));

Frequently an error like this is returned in the Chrome Developer Tools:

VM223:1 Uncaught SyntaxError: Unexpected token . in JSON at position 0
    at JSON.parse (<anonymous>)
    at renderHello (render.js:2)
    at onload (docs.html:91)

I added these lines in the script to reveal the location of the website file that includes the Mustache template, so I knew where to locate abc.json:

   var loc = window.location.pathname;
   var dir = loc.substring(0, loc.lastIndexOf('/'));
   console.log(dir)

And the file structure is now this:

directory

--file-with-mustache-script.html

--abc.json

This may not be relevant, but this is the Mustache script, which of course already works with the JSON as a string.

  <body onload="renderHello()">
    <div id="target">Loading...</div>
    <script id="template" type="x-tmpl-mustache">
      Hello {{ cloudy }}, {{ classic }}!
    </script>
  </body>

The website build tool I'm using does not support Node or Handlebars.

If it is relevant at all, the goal is to populate values from a JSON file in a product documentation website page to indicate which paragraphs apply to which product version.

Upvotes: 0

Views: 199

Answers (2)

Carsten Massmann
Carsten Massmann

Reputation: 28196

Something like this would do the job:

function renderHello() {
  
 fetch('https://jsonplaceholder.typicode.com/users/3').then(r=>r.json())
 .then(json=>{
  // var template = document.getElementById("template").innerHTML;
  // var rendered = Mustache.render(template, json);
  document.getElementById("target").innerHTML = JSON.stringify(json,null,2);
 })
}
renderHello();
<pre id="target"></pre>

As I don't have access to your abc.json file I used a publicly resource at http://typicode.com.

Upvotes: 0

digitalniweb
digitalniweb

Reputation: 1142

You need to load the content of the file via "AJAX". You can't get the content like you are trying to do.

Upvotes: 1

Related Questions