0

Hello brilliant people!

I've been sitting hours trying to figure out why I cant load a local JSON file using Ajax. I bet it's some silly typo, of that I totally misunderstand something. I'm using Node.js Express.

The location of the two files:

"trollytrains/views/trips.ejs" (Doing the ajax-request)

"trollytrains/json/allstops.json"

$.ajax(
    {
      type: "GET",
      url: "../json/allstops.json",
      contentType: "application/json; charset=utf-8",
      dataType: "json",     
      success: function (data) {

        alert('success');

      },

      error: function (msg) {
        alert("error");
        alert(msg.responseText);
      }
    });

I have tried altering the URL in all kinds of variations:

./allstops.json

allstops.json

json/allstops

/json/allstops

/json.allstops.json

No matter what I type I get a 404 error.

GET http://localhost:1337/json/allstops.json 404 (Not Found) jquery.min.js:4

Am I entering the wrong URL, or is there some other problem in my code that I haven't detected? I'm very new to JSON and Javascript so I wouln't be surprised.

I'd really appreciate some tips!

Best / J

jeth318
  • 65
  • 3
  • 7
  • Where is your json file located. I may assume that you're using NodeJS/ ExpressJS on the backend, did you configure it to serve static files? – ThinhIT Apr 28 '17 at 08:21
  • when you open the dev tools, can you open the file in a new window. What is the actual path of the file btw? – ZombieChowder Apr 28 '17 at 08:22

2 Answers2

1

Am I entering the wrong URL, or is there some other problem in my code that I haven't detected?

It depends on whether you can access the URL in the request in your example:

GET http://localhost:1337/json/allstops.json 404 (Not Found) jquery.min.js:4

See if you see the correct JSON when you go to http://localhost:1337/json/allstops.json with the browser. If you get 404 then this JSON is not served at this PATH and the problem can be either your backend failing to serve the JSON or you using the wrong URL.

It's impossible to tell you if you backend code is fine if you didn't include even a single line of the code that actually attempts to serve the JSON in question.

My assumption would be that you're not serving the JSON files.

I assume that you entire app is located in trollytrains directory and you have a json directory inside. To serve what's there you need to use something like this if you're using Express:

app.use('/json', express.static(path.join(__dirname, 'json')));

For more options to serve static files with and without Express, see this answer:

Community
  • 1
  • 1
rsp
  • 107,747
  • 29
  • 201
  • 177
  • Thanks. This is probably the case. I can't access the file using the url in the browser. I though I could get the json-data directly from the file, without any backend routing. My newbie mistake. I'll try again. – jeth318 Apr 28 '17 at 08:37
  • @jeth0010 You cannot get **anything** without any backend routing, no matter if it's JSON or anything else. You could access some local files with the `file://` pseudo-protocol (but even then you shouldn't be able to use AJAX to access any file on the file system, for security reasons) but here you're using HTTP and your client-side code can only access what is served with HTTP. Websites cannot access your local files on your disk. If they could it would be a disaster. – rsp Apr 28 '17 at 08:40
  • Thank you very much. I got it working after setting up some backend routing. I wish you a great weekend! – jeth318 Apr 28 '17 at 09:56
0

Try this.

  $.ajax({
  url: '../json/allstops.json',
  dataType: 'json',
  data: 
  async: false,
  success:function()
{}
});
Wintergreen
  • 236
  • 1
  • 9
  • 1
    You should **never** use `async: false` with AJAX for things like this because it will completely block your browser for the time of the request. Remember that the first letter of AJAX stands for Asynchronous. How can it even solve the problem of accessing nonexistent resource? You will just block the UI while you're waiting for the 404 response, but you will get the 404 nonetheless. – rsp Apr 28 '17 at 08:48
  • Thanks for your valuable suggestion. – Wintergreen Apr 28 '17 at 09:01