How to consume this JSON with Javascript?

Question

How do I consume that URL using Javascript?

https://client-demo-accounts-2.bootstrap.fyre.co/bs3/v3.1/client-demo-accounts-2.fyre.co/379221/MjAxNjAxMjcxMjQyOmRlc2lnbmVyLWFwcC0xNDUzODQwMjgxODk0/init

Answer 1

Because of the CORS restriction, you cannot make a request ajax common.

In this case, to circumvent this problem, you can use a JSONP.

In that case, I’ll illustrate with the JSONP jQuery.

var url = 'https://client-demo-accounts-2.bootstrap.fyre.co/bs3/v3.1/client-demo-accounts-2.fyre.co/379221/MjAxNjAxMjcxMjQyOmRlc2lnbmVyLWFwcC0xNDUzODQwMjgxODk0/init';
$.ajax({
  url: url,
  dataType: "jsonp",
  success: function (response) {
    console.log(response);
  }

});

I tested it in the given url and it perfectly accepted the use of JSONP.

Answer 2

Using Javascript only:

var url = "https://client-demo-accounts-2.bootstrap.fyre.co/bs3/v3.1/client-demo-accounts-2.fyre.co/379221/MjAxNjAxMjcxMjQyOmRlc2lnbmVyLWFwcC0xNDUzODQwMjgxODk0/init";

var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", url);
httpRequest.responseType = "json";
httpRequest.addEventListener("readystatechange", function () {
  if (httpRequest.readyState == 4){
    if (httpRequest.status == 200){
      console.log(httpRequest.response);
      console.log(httpRequest.response.headDocument);
      console.log(httpRequest.response.headDocument.authors);
      console.log(httpRequest.response.headDocument.content);
    } else {
    
    }
  }
});

httpRequest.send();

The above example will not work on snippet of Sopt, so you can check the same at Jsfiddle