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...? — user5734311
– user5734311, Commented Aug 19, 2019 at 17:22
try fetch once 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
– just coding, Commented Aug 19, 2019 at 17:23

Seblor · Accepted Answer · 2019-08-19 17:26:36Z

0

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

answered Aug 19, 2019 at 17:26

Seblor

7,1771 gold badge30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Speed Remake Over a year ago

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)

Seblor Over a year ago

Look at the first example on this page : developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch. In the first then callback, response.json(); is your parsed JSON object.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related