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 Overflow
Top answer
1 of 2
34

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!

2 of 2
9

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!

🌐
ReqBin
reqbin.com › req › 5nqtoxbx › get-json-example
How to get JSON from URL?
In this JSON from URL example, we make a GET request to the ReqBin echo URL to get the JSON. Click Send to run Get JSON from URL example online and see results. ... JavaScript Object Notation (JSON) is a lightweight text-based, language-independent data exchange format.
Top answer
1 of 7
34

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.');
});
2 of 7
25

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

🌐
Reddit
reddit.com › r/webscraping › finding json data
r/webscraping on Reddit: Finding json data
August 14, 2023 -

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?

🌐
YouTube
youtube.com › watch
Web Basics - Accessing JSON data from URL - YouTube
This video shows how to access JSON data from a URL using JS and the JQuery resource
Published   December 13, 2019
🌐
ZetCode
zetcode.com › javascript › jsonurl
JavaScript JSON from URL - Fetching Data Explained
It allows an easy way to retrieve data from a URL without having to do a full page refresh. As a consequence, a web page has to update just a part of the page without disrupting what the user is doing. XMLHttpRequest is used heavily in AJAX programming. <script> 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.send(); }; getJSON('http://time.jsontest.com', function(err, data) { if (err != null) { console.error(err); } else { var text = `Date: ${data.date} Time: ${data.time} Unix time: ${data.milliseconds_since_epoch}` console.log(text); } }); </script>
🌐
JSON Formatter
jsonformatter.org › json-url-decode
Best JSON URL Decode Online
This tools helps to convert JSON URL Encoded data to JSON Data String.
Find elsewhere
🌐
URL to Any
urltoany.com › url-to-json
URL to JSON Converter - Free Online JSON Data Extractor
Yes, our URL to JSON converter is completely free to use. You can convert any website to JSON format without any cost or registration required. Simply paste your URL and get instant JSON conversion results.
🌐
CRAN
cran.r-project.org › web › packages › jsonlite › vignettes › json-apis.html
Fetching JSON data from REST APIs
These interface to data from various departments, such as news articles, book reviews, real estate, etc. Registration is required (but free) and a key can be obtained at here. The code below includes some example keys for illustration purposes. #search for articles article_key <- "&api-key=b75da00e12d54774a2d362adddcc9bef" url <- "http://api.nytimes.com/svc/search/v2/articlesearch.json?q=obamacare+socialism" req <- fromJSON(paste0(url, article_key)) articles <- req$response$docs colnames(articles)
🌐
JMP User Community
community.jmp.com › t5 › Discussions › How-to-parse-a-JSON-file-opened-from-URL › td-p › 44791
Solved: How to parse a JSON file opened from URL? - JMP User Community
September 28, 2017 - The best way I've been able to do this is through the GUI, manually selecting File --> Open --> and entering the URL into "File Name". If I select "JSON Data File (*.json)" from the file type list, JMP will download the file and open the parsed ...
🌐
GeeksforGeeks
geeksforgeeks.org › how-to-read-a-json-response-from-a-link-in-python
How to read a JSON response from a link in Python? - GeeksforGeeks
February 24, 2021 - In this way, one can easily read a JSON response from a given URL by using urlopen() method to get the response and then use json.loads() to convert the response into a JSON object.
🌐
Educative
educative.io › answers › how-to-read-a-json-file-from-a-url-in-javascript
How to read a JSON file from a URL in JavaScript
A function where we define the fate of our data. An optional parameter that we sometimes define to ensure data security. loadJSON("https://jsonplaceholder.typicode.com/posts",myData,'jsonp'); Define the myData function.
🌐
Team Treehouse
teamtreehouse.com › community › how-to-get-json-data-from-any-url-api
How to get JSON data from any URL (API)? (Example) | Treehouse Community
February 20, 2021 - You can try researching a site or app to see if has an API that you can send requests to. Or you can try just sending a request and see what you get. If you found a site that you want to get info from, but it doesn't return JSON, you may be ...
🌐
JSON Formatter
jsonformatter.org › json-parser
JSON Parser Online to parse JSON
In case if the user has provided a URL, which we use the server to fetch the URL data. When the user uses Save Online functionality, this tool saves the data to the server's database.
Top answer
1 of 4
6

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);
}
2 of 4
5

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.

🌐
ParseHub
parsehub.com › blog › scrape-data-json
How to Scrape data from any website to a JSON file | ParseHub
June 1, 2021 - ... For today’s example, we will ... ParseHub for free before we get started. Open ParseHub, click on “New Project” and enter the URL of the page you will be scraping....