How to load a json file with javascript locally without Jquery?

Question

I'm creating a website to progress in javascript and I have a little problem, every ways I try, my browser doesn't want to load my json file.

I tried many codes i found on internet but none of them work (or I don't know how to make them work). Finally i fond this one which is quite easy to understand but yhis one too doesn't work and always return an error message.


function loadJSON(path,success, error)
{
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 1) {
                if (success)
                    success(JSON.parse(xhr.responseText));
            } else {
                if (error)
                    error(xhr);
            }
        }
    };
    xhr.open("GET", path , true);
    xhr.send();
}

function test()
{
    loadJSON('test.json', function(data) { console.log(data); }, function(xhr) { console.error(xhr); });
}

I run the test function but everytimes, the console return me an error. Someone have an idea to solve my problem ?

When you say "locally", do you mean "next to the HTML file that loads this script"? Because that's the only way this is going to work. Also, if you're getting an error message, how about telling us what the exact error is...? — , Aug 19 '19 at 17:22
try fetch once https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API you dont need to code entire XHR function modern browsers support fetch and its simple to use — just coding, Aug 19 '19 at 17:23
https://stackoverflow.com/questions/50776445/vanilla-javascript-version-of-ajax — Seph Reed, Aug 19 '19 at 17:24
Possible duplicate of [Loading local JSON file](https://stackoverflow.com/questions/7346563/loading-local-json-file) — Wendelin, Aug 19 '19 at 17:25

score 0 · Accepted Answer · answered Aug 19 '19 at 17:26

status is the HTTP response code.

200 means the request has been successful. The status will most likely never be 1.

Here is a list of HTTP codes

As a solution, I suggest using the fetch API, which is the modern way to query files.

Here are some examples on how to use it

If you really want to use AJAX, use this :

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var resp = this.response;
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

Source : You Might Not Need jQuery

It's look like to work but How could I get back what's write on my json file ? (I don't really understand how it work but i will make research) — Speed Remake, Aug 19 '19 at 17:36
Look at the first example on this page : https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch. In the first `then` callback, `response.json();` is your parsed JSON object. — Seblor, Aug 19 '19 at 17:42

How to load a json file with javascript locally without Jquery?

1 Answers1