The quickest and easiest way is to use google developer tools in Google Chrome.
1st go to google developer tools. F12 or Ctrl+Shift+I or top right Ellipsis->More Tools->Developer Tools
2nd Click on the "Network" tab.
3rd click on the "XHR" sub-tab. XHR(XMLHttpRequest)
if a site uses json it will be listed under the XHR sub-tab. You can search through the different return objects, select one and use the "preview" sub-sub-tab to view it.
View JSON

View JSON URL

Although the above way is the easiest it is not the most stable way of getting the info you need. Many sites make changes to the return data without any notice. This will probably break your app...
I think what you are looking for is an API(Application programming interface). Most web APIs return json or xml. You should start by searching for the api documentation for the specific site that you want to get json data from. Example documentation for sites that have public api feeds are github api or youtub api. Many of these will require authentication in order to get the desired json response but the documentation should show you how to do it.
Using a legitimate web api is the most stable way to go. Meaning your app has less chance of randomly breaking all of the time due to feed changes, url changes... I hope this helps!
Answer from Tim on Stack OverflowThe quickest and easiest way is to use google developer tools in Google Chrome.
1st go to google developer tools. F12 or Ctrl+Shift+I or top right Ellipsis->More Tools->Developer Tools
2nd Click on the "Network" tab.
3rd click on the "XHR" sub-tab. XHR(XMLHttpRequest)
if a site uses json it will be listed under the XHR sub-tab. You can search through the different return objects, select one and use the "preview" sub-sub-tab to view it.
View JSON

View JSON URL

Although the above way is the easiest it is not the most stable way of getting the info you need. Many sites make changes to the return data without any notice. This will probably break your app...
I think what you are looking for is an API(Application programming interface). Most web APIs return json or xml. You should start by searching for the api documentation for the specific site that you want to get json data from. Example documentation for sites that have public api feeds are github api or youtub api. Many of these will require authentication in order to get the desired json response but the documentation should show you how to do it.
Using a legitimate web api is the most stable way to go. Meaning your app has less chance of randomly breaking all of the time due to feed changes, url changes... I hope this helps!
I know this is an older question, but I felt compelled to chime in. If you goal is to simply determine if a site uses JSON for data exchange, then the solution proposed by Tim is a very good solution. However, if you are looking to scrape data from an arbitrary site, there is no guarantee that the site uses JSON as data exchange, as stated by @KenanZahirovic. There are numerous sites that do not do this. Instead they embed the data into the HTML, or use XML, or some other method for getting the content to the client. There is no standard way of doing it, which is why data scraping is so difficult. It requires figuring out how data is transferred and building a client for that.
For scenarios where you need to gather data from multiple sources, you may end up with multiple clients due to the nuances between the sources. This site explains some best practices for data scraping. However, this would likely require a server-side application. Having a server-side application that gathers data and stores it in a database would make the most sense for this scenario. This way you can have a consistent API that the client hits to access the data.
An algorithm has been proposed that can scrape many sites fairly confidently. If you only want to have a client, this may or may not be the best way to go. It all depends on how much processing you want the client to do. If at all possible, try and off load processing to a server.
This answer might be way more than is required, but ,again, I felt compelled to chime in. I am sure the previous answer was sufficient. I do recommend though that you mark an answer as the accepted answer.
Best of luck!
Here is one without using JQuery with pure JavaScript. I used javascript promises and XMLHttpRequest You can try it here on this fiddle
HTML
<div id="result" style="color:red"></div>
JavaScript
var getJSON = function(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
resolve(xhr.response);
} else {
reject(status);
}
};
xhr.send();
});
};
getJSON('https://www.googleapis.com/freebase/v1/text/en/bob_dylan').then(function(data) {
alert('Your Json result is: ' + data.result); //you can comment this, i used it to debug
result.innerText = data.result; //display the result in an HTML element
}, function(status) { //error detection....
alert('Something went wrong.');
});
You can do this with JSONP like this:
function insertReply(content) {
document.getElementById('output').innerHTML = content;
}
// create script element
var script = document.createElement('script');
// assing src with callback name
script.src = 'http://url.to.json?callback=insertReply';
// insert script to document and load content
document.body.appendChild(script);
But source must be aware that you want it to call function passed as callback parameter to it.
With google API it would look like this:
function insertReply(content) {
document.getElementById('output').innerHTML = content;
}
// create script element
var script = document.createElement('script');
// assing src with callback name
script.src = 'https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply';
// insert script to document and load content
document.body.appendChild(script);
Check how data looks like when you pass callback to google api: https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply
Here is quite good explanation of JSONP: http://en.wikipedia.org/wiki/JSONP
You can use jQuery .getJSON() function:
$.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback', function(data) {
// JSON result in `data` variable
});
If you don't want to use jQuery you should look at this answer for pure JS solution.
If you want to do it in plain javascript, you can define a function like this:
var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send();
};
And use it like this:
getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback',
function(err, data) {
if (err !== null) {
alert('Something went wrong: ' + err);
} else {
alert('Your query count: ' + data.query.count);
}
});
Note that data is an object, so you can access its attributes without having to parse it.
New to scraping here… most tutorials use requests to get html from a url and then use bs4 to parse… but pretty much no websites have data in the html. They are all dynamically loaded from what I understand.
I’m trying to inspect to find the some sort of json package or file that is sent upon loading but I can’t find anything
any tricks for this?
After so many months of search, I found the solution. Hence, I am answering my own question.
When JSON is not supported and when we are stuck with Same Origin Policy, we have to wrap around our JSON with a padding and make it a JSONP.
To do that, we have a life saving website http://anyorigin.com/
You can paste your URL and get the corresponding JQuery code something like this,
$.getJSON('http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?', function(data){
$('#output').html(data.contents);
});
If you want to use your own code, then just use the URL from the code above, which is
http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?
This above URL will give you the same JSON data as JSONP and solves all the trouble.
I had used the following code, which on success calls displayAll function
$.ajax({
url: 'http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?',
type: 'GET',
dataType: "json",
success: displayAll
});
function displayAll(data){
alert(data);
}
If you look in Chrome inspector, you probably see this error:
XMLHttpRequest cannot load http://webapp.armadealo.com/home.json. Origin http://stackoverflow.com is not allowed by Access-Control-Allow-Origin.
What this means is that the server doesn't want the client web page reading the file. The client isn't trusted. This is a basic security feature of XMLHttpRequest in order to prevent a site like mybank.evil.com from downloading data from mybank.com. It unfortunately makes testing from a local file challenging.
If you trust any site with your data or a select number of sites, you can configure your server script to send the Access-Control-Allow-Origin to allow certain sites through.
See https://developer.mozilla.org/en/http_access_control for more details.