Help with $.getJSON

Help with $.getJSON
0

#1

Hi there,
I am working on the random quote generator project. I didn’t find a free quote api, so I just stored some quotes in a .json file on my webserver.

I am getting the following error in the Chrome console when I try to retrieve the file:
index.html:1 XMLHttpRequest cannot load https://beallfamily.net/quotes.json. No ‘Access-Control-Allow-Origin’ header is present on the requested resource…

My code is in the pen here:
https://codepen.io/diver864/pen/aLWOgR

Thank you for helping me get off square 1 on this project!


#2

It looks like there’s a problem with your JSON. You have an object with multiple "quote" keys. Maybe you should rewrite it to be an array instead. Like

{
  "quotes": [
    {
      "text": "I find that the harder I work, the more luck I seem to have.",
      "author": "Thomas Jefferson"
    },
    {
      "text": "...",
      "author": "...",
    },
    ...
  ]
}

About the issue that you’re having, you could try using a proxy. Try using https://cors-anywhere.herokuapp.com/https://beallfamily.net/quotes.json


#3

Thank you for the quick reply! The proxy helped, and I also appreciate the catch on the json file. I’ve changed it as you recommended.