What is the vanilla JS version of jQuery $ .getJSON

Question

I need to create a project in order to get into the JS boot disk I am accessing. They tell me that I can only use vanilla JS, in particular that frameworks and jQuery are not allowed. Until this moment, when I wanted to get the JSON file from the api, I would say

$.getJSON(url, functionToPassJsonFileTo) 

for json calls and

 $.getJSON(url + "&callback?", functionToPassJsonPFileTo) 

for JSONP calls. I just started programming this month, so please remember that I don’t know the difference between JSON or JSONP or how they relate to this thing called ajax. Please explain how I will get what reached 2 lines in Vanilla Javascript. Thanks.

So, to clarify,

 function jsonp(uri){ return new Promise(function(resolve, reject){ var id = '_' + Math.round(10000 * Math.random()) var callbackName = 'jsonp_callback_' + id window[callbackName] = function(data){ delete window[callbackName] var ele = document.getElementById(id) ele.parentNode.removeChild(ele) resolve(data) } var src = uri + '&callback=' + callbackName var script = document.createElement('script') script.src = src script.id = id script.addEventListener('error', reject) (document.getElementsByTagName('head')[0] || document.body || document.documentElement).appendChild(script) }) } 

what is the equivalent of jsonp?

Answer 1

Here is the version of Vanilla JS for $.getJSON :

 var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { // Success! var data = JSON.parse(request.responseText); } else { // We reached our target server, but it returned an error } }; request.onerror = function() { // There was a connection error of some sort }; request.send(); 

Link: http://youmightnotneedjquery.com/

For JSONP SO already has an answer here

With $.getJSON you can download JSON-encoded data from the server using an HTTP GET request.

Answer 2

ES6 has a Fetch API that provides a global fetch() method that provides a simple and logical way to retrieve resources asynchronously over a network.

This is simpler than XMLHttpRequest .

 fetch(url) // Call the fetch function passing the url of the API as a parameter .then(function() { // Your code for handling the data you get from the API }) .catch(function() { // This is where you run code if the server returns any errors }); 

Answer 3

I appreciate the vanilla js equivalent of $ .getJSON above but I came to exactly the same point. I actually tried to get rid of jquery which I cannot master in any way. The fact that I am finally struggling with BOTH is the asynchronous nature of the JSON request.

I am trying to extract a variable from an asynchronous call

 function shorten(url){ var request = new XMLHttpRequest(); bitly="http://api.bitly.com/v3/shorten?&apiKey=mykey&login=mylogin&longURL="; request.open('GET', bitly+url, true); request.onload = function() { if (request.status >= 200 && request.status < 400) { var data = JSON.parse(request.responseText).data.url; alert ("1:"+data); //alerts fine from within // return data is helpless } }; request.onerror = function() { // There was a connection error of some sort return url; }; request.send(); } 

now that the function is defined and processing works

 shorten("anyvalidURL"); // alerts fine from within "1: [bit.ly url]" 

but how to assign a data value (from an asynchronous call) to be able to use it in my javascript after the function has been called

eg,

  document.write("My tiny is : "+data);