-1

I just recently tried learning javascript and I want to make a website that uses JSON files as storage. So far I have been to make the GET method work:

$.ajax({
  type: 'GET',
  url: 'Projects/Sample/data.json',
  success: function(data) {
    console.log("I have friends!", data);
  }
});

Since I am learning from this site http://rest.learncode.academy/, I also tried using its post method:

$.ajax({
  type: 'POST',
  url: 'Projects/Sample/data.json',
  data: {name: 'Billy Bob', age: 27},
  success: function(data) {
    console.log("Friend added!", data); //the new item is returned with an ID
  }
});

This code works if I use the website's json http://rest.learncode.academy/api/johnbob/friends. But when I try to use my JSON file located in my web server, new data don't seem to be added. I am using XAMPP as my web server.

WannabeWeebDev
  • 1

1 Answers1

0

I think it's worth looking at the accepted answer on this question:

Deadly CORS when http://localhost is the origin

I'd definitely recommend the lvh.me option, so instead of 

$.ajax({
  type: 'GET',
  url: 'Projects/Sample/data.json',
  success: function(data) {
    console.log("I have friends!", data);
  }
});

You'd have

$.ajax({
  type: 'GET',
  url: 'http://lvh.me/data.json',
  success: function(data) {
    console.log("I have friends!", data);
  }
});

Assuming your data.json is in the base folder (i.e. you can access it by hitting http://lvh.me/data.json

Community
  • 1
  • 1
Wakeuphate
  • 493
  • 3
  • 13
  • It has an error that says XMLHttpRequest cannot load http://lvh.me/SVmatches.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 404. – WannabeWeebDev Jan 09 '17 at 14:12
  • @WannabeWeebDev Can you browse to that address and see the JSON file? If so it may be worth looking into the other options posted in the other Question, such as `--disable-web-security` flag for Chrome. But keep in mind you only want to use that flag while testing. Remove it as soon as you're done as it means your browser is insecure. – Wakeuphate Jan 09 '17 at 14:14
  • Yep, I can see the JSON using the lvh URL. I tried to look into that but never really understood where to actually do that in Chrome, I try to study it again hmmm. Edit: nvm about the disable web security, just googled it bit lol I'm bad. – WannabeWeebDev Jan 09 '17 at 14:17
  • I was able to no longer see the XMLHttpRequest error by opening my site URL with a disabled wed security Chrome session using this: `chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security` but it still doesn't POST new data in the JSON file... – WannabeWeebDev Jan 09 '17 at 14:42
  • @WannabeWeebDev You never really would be adding data to your JSON file, in the case they're showing, they've an API likely writing into a database. JSON would really be you reading the data only. – Wakeuphate Jan 09 '17 at 14:49
  • Oh okay so does this mean I really can't use JSON files as an alternative from using databases like MySQL? Thanks a lot for the responses btw! – WannabeWeebDev Jan 09 '17 at 14:57
  • @WannabeWeebDev no problem at all, I mean, you could, but not something I'd recommend trying to implement. If you wanted to work from local file/database or whatever, I'd recommend maybe [SQLite](http://sqlite.org/onefile.html) , [MongoDB](https://www.mongodb.com/) or [PouchDB](https://pouchdb.com/) . I personally used Pouch on a recent project and it worked wonders for me, very easy to implement too. – Wakeuphate Jan 09 '17 at 15:02