How do i load my local json file just using JavaScript

Question

My json file looks like this

{
    "Persons": {
        "Name" : "e",
        "Name2": "e",
        "Id": "4700"
    }, [...]
}

How does my code looks like to parse/load this local json file into a html file. I tried everything out but none of them worked.

You need to make an AJAX GET request to load data. Then you would use JSON.parse to parse text loaded content into object data. — dfsq
– dfsq, Commented Dec 8, 2014 at 14:38
What are you using to retrieve the data? An attempt should help everyone out. — Mr. Polywhirl
– Mr. Polywhirl, Commented Dec 8, 2014 at 14:39
@brbcoding I'd argue that "load a resource using a local webserver" is not the same as "load a local file". — lexicore
– lexicore, Commented Dec 8, 2014 at 14:42

Sean Kendle · Accepted Answer · 2014-12-08 14:44:07Z

6

Here's an example from (http://youmightnotneedjquery.com/)

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

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

  }
};

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

request.send();

Your data variable will then have accessible members like this:

alert(data.Persons.Name);

answered Dec 8, 2014 at 14:44

Sean Kendle

3,6481 gold badge30 silver badges35 bronze badges

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

1 Comment

Sean Kendle Over a year ago

Depends where the file is in relation to the file you're working on. If it's in the "data" folder then yes. As a pointer for further help in the future, definitely include more details, like the location of the data.json file, and some of the code you've tried to use.

Collectives™ on Stack Overflow

How do i load my local json file just using JavaScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related