Is there a solution?

Question

So, i'm trying to run this code to put the information from the JSON file to the HTML page. This is the code im trying to run:

HTML:

<div id="gameContainer">
        <script>
        var games = "../games.json"
      
      document.getElementById("gameContainer").innerHTML = `<h1>${games.author}</h1>`
    </script>
</div>

games.json:

[
  {
      "name": "gameName",
      "author": "authorName"
  }
]

On the site, the html says "undefined" and that's it. No errors in the console, nothin.

`games` is just the file name. You have to get the file's contents. — General Grievance, Mar 08 '22 at 19:08
A file name is not the same as a file content. JSON is not the same as JavaScript. You need to read the file and decode the JSON. — Álvaro González, Mar 08 '22 at 19:08
Excuse me, a string is **not** an object. `"../games.json"` is a string. No browser will automagically read the JSON file for you just because you declared a variable. — code, Mar 08 '22 at 19:08

score 2 · Answer 1 · edited Mar 08 '22 at 19:23

You will have to fetch the file first in order to read the contents of the file.

const url = '../games.json';

const fetchJson = async () => {
    try {
        const data = await fetch(url);
        const response = await data.json();
        document.getElementById('gameContainer').innerHTML = `<h1>${response[0].author}</h1>`;
    }
    catch (error) {
        console.log(error);
    }
};

also, your games is an Array! So you need to use an Array index in order to then get the containing Object like: games[0].author, not games.author.

Jamal · Answer 2 · 2022-03-08T19:33:21.557

0

You cannot make a AJAX call to a local resource as the request is made using HTTP.

A workaround is to run a local webserver, serve up the file and make the AJAX call to localhost.

In terms of helping you write code to read JSON, you should read the documentation for jQuery.getJSON():

http://api.jquery.com/jQuery.getJSON

Here's a way to do it without jQuery.

First create this function:

function loadJSON(callback) {   
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', '../news_data.json', true);
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200") {
      callback(JSON.parse(xobj.responseText));
    }
  };
  xobj.send(null);  
}

Then you can use it by simply calling something like this:

loadJSON(function(json) {
  console.log(json); // this will log out the json object
});

source

edited Mar 08 '22 at 19:33

answered Mar 08 '22 at 19:14

Jamal

34
3

We cannot get a JSON file without jQuery? – Roko C. Buljan Mar 08 '22 at 19:15
1

@RokoC.Buljan the answerer didn't say you needed jQuery. – code Mar 08 '22 at 19:16
@code There's no Tag in the question that says `jquery`. Tags are important. Otherwise we might see other answers popping explaining what all other technologies, libraries you can use. Irrelevant. *"Go learn about AJAX on jQuery.com"* is misleading at best and not at all the right resource. The first part of this answer was already covered in OP comments. – Roko C. Buljan Mar 08 '22 at 19:41

Is there a solution?

2 Answers2