7

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.

Sean Kendle
  • 3,538
  • 1
  • 27
  • 34
m1711
  • 101
  • 1
  • 8
  • 1
    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 Dec 08 '14 at 14:38
  • What are you using to retrieve the data? An attempt should help everyone out. – Mr. Polywhirl Dec 08 '14 at 14:39
  • @dfsq AJAX GET of the local file will fails in [Chrome](https://code.google.com/p/chromium/issues/detail?id=40787). – lexicore Dec 08 '14 at 14:40
  • @lexicore it should work if running a local webserver. – brbcoding Dec 08 '14 at 14:41
  • @lexicore: Yes, that is called a "cross-domain request". Only `http://localhost` will work for local AJAX in Chrome. – Mr. Polywhirl Dec 08 '14 at 14:41
  • possible duplicate of [Loading local json file](http://stackoverflow.com/questions/7346563/loading-local-json-file) – brbcoding Dec 08 '14 at 14:42
  • 2
    @brbcoding I'd argue that "load a resource using a local webserver" is not the same as "load a local file". – lexicore Dec 08 '14 at 14:42
  • @dfsq Basis for assumption? – lexicore Dec 08 '14 at 14:43
  • @Mr.Polywhirl No, that is not called "cross-domain request". It is called "a special security setting in Chrome", read the link I've posted. Has nothing to do with cross-domain. Can be disabled with `--allow-file-access-from-files`. – lexicore Dec 08 '14 at 14:45
  • @lexicore guess I don't understand cross-origin then. Seems like that post discusses `--disable-web-security` which is [clearly used to bypass cross-domain restrictions](https://code.google.com/p/chromium/codesearch#chromium/src/content/public/common/content_switches.cc&q=disable-web-security&sq=package:chromium&type=cs&l=273) – brbcoding Dec 08 '14 at 15:05
  • @brbcoding If I have a local file `index.html` and a local file `test.xml` directly next to it then trying to load `test.xml` per XHR from a script in `index.html` fails in Chrome. This is the same location, so neither technically nor spec-ally "cross-origin". It is the very very same origin. So it has nothig to do with cross-origin, no matter what the source code says. It is just some random security feature in Chrome. Hit me hard ~3 years ago, still angry. – lexicore Dec 08 '14 at 15:17
  • This technically isn't a duplicate of the post @brbcoding linked to. That question involves jQuery, and this one does not. – Sean Kendle Dec 08 '14 at 16:01
  • @SeanKendle well, this one doesn't show any code whatsoever so there was no way to know. The other one wasn't tagged as jQuery either (the OP mentioned it, but there are some non-jQuery answers there as well). – brbcoding Dec 08 '14 at 16:18
  • The one you linked to has jQuery in the example provided. `var json = $.getJSON("test.json");` – Sean Kendle Dec 08 '14 at 16:43
  • Call me pedantic, but this is a purely javascript question. If the OP didn't have jQuery, or even know what it was, he would have been confused by jQuery answers. I just think people too quickly reflexively try to vote down, and call out questions as duplicates on this site. There should be a little more attempt to help, rather than just can a question immediately. My opinion. – Sean Kendle Dec 08 '14 at 16:45
  • @SeanKendle I automatically reach for the close button when there is 0 effort displayed. This is a perfect example of that. If the OP tried "everything" they should at least show some of that attempt. My opinion as well. – brbcoding Dec 08 '14 at 21:31
  • That's a respectable policy, however it's clear this is a brand new user, and that kind of treatment would turn a person away from the site. I err on the side of helping them understand the rules, rather than simply vote down, or close the question, or mark as duplicate. The beauty of this community is the willingness to help each other. I understand your policy, though. It's hard to help someone who doesn't help us help them! ^_^ – Sean Kendle Dec 08 '14 at 22:23

1 Answers1

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);

Sean Kendle
  • 3,538
  • 1
  • 27
  • 34
  • 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. – Sean Kendle Dec 08 '14 at 15:40