I'm trying to create a webpage that displays JSON content. Rather than writing a JSON file with hundreds of entries by hand, I want to load an html given a url and convert its contents into a JSON file.
I'm very new to javascript and jquery, so I'm doing some practice webpages to reinforce what I've learned. For this practice project I want to access this webpage: http://dogtime.com/dog-breeds, traverse and display some of the elements from its contents. What I'm stuck on is how to retrieve an html from a given url.
I'm currently trying this code:
//When the document is ready
$(document).ready(function() {
//Use ajax to load this webpage
$.get("http://tired.com/", function(data) {
//Load its data into the data variable
var data = $(data);
//Put the webpage into the variable with id "div"
$("#div").html(data);
});
})
But in the console I'm getting the error:
"XMLHttpRequest cannot load http://tired.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."
I did some reading on this post: "No 'Access-Control-Allow-Origin' header is present on the requested resource" but I didn't really understand how to get a solution from it. Some possible solutions that I gathered could be:
In Windows, paste this command in run window:
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
This seems like a band-aid fix that won't work long-term.
Does this only work if both the client and server supports CORS? I also couldn't understand where to put/how to use this code because only snippets of functions are shown, and the example doesn't seem to work.
- Download the HTML page(s) and parse them.
Again, this seems like a fix that avoids the problem.
This is the entirety of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--JSON file where I'll be storing some content-->
<script src="breeds.js"></script>
</head>
<script>
//When the document is loaded
$(document).ready(function() {
//Use Ajax to load the webpage
$.get("http://tired.com/", function(data) {
//Load the webpage into the data variable
var data = $(data);
//Load the html from the webpage into the element with id "div"
$("#div").html(data);
});
})
</script>
<body>
<div id="div"></div>
</body>
</html>
I would greatly appreciate an explanation how to to make this code work. Thank you!
EDIT: So I'm using Python's BeautifulSoup to create my JSON file, but I can't get javascript to read it using:
$.getJSON("breeds.json", function(json) {
console.log(json);
})
because it causes the same XMLHttpRequest error as before. I've verified that my JSON files are being created correctly by using http://www.freeformatter.com/json-validator.html. The only solution I can find is the hacky approach of changing the json file to a js file, and converting the json content into a global such as:
breeds = '{"dogBreeds": [{"size": "1", "shedding": "1", "link": "http://dogtime.com/dog-breeds/affenpinscher", "energy": "4", ....."Yorkshire Terrier", "intelligence": "3"}]}'
Which I can then read using:
window.onload = function() {
var obj = JSON.parse(breeds);
console.log(obj.dogBreeds[0].breedName);
}
Is there a better way to do this?
