Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the vanilla JS version of Jquery's $.getJSON

I need to build a project to get into a JS bootcamp I am applying for. They tell me I may only use vanilla JS, specifically that frameworks and Jquery are not permitted. Up to this point when I wanted to retrieve a JSON file from an 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 bear in mind I don't know the difference between JSON or JSONP or how they relate to this thing called ajax. Please explain how I would get what the 2 lines above achieve in Vanilla Javascript. Thank you.

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)
    })
}

would be the JSONP equivalent?

like image 391
oski369 Avatar asked Feb 09 '16 14:02

oski369


People also ask

What is getJSON in JavaScript?

The getJSON() method is used to get JSON data using an AJAX HTTP GET request.

What is vanilla JavaScript?

"VanillaJS is a name to refer to using plain JavaScript without any additional libraries like jQuery back in the days. People use it as a joke to remind other developers that many things can be done nowadays without the need for additional JavaScript libraries." Or, in our case, without new, fancy frameworks.

Is vanilla JS and normal js same?

Vanilla JavaScript refers to using plain Javascript without any additional libraries or frameworks. The term became popular when Eric Wastl created the Vanilla JS site in 2012 as a joke. The site tries to bring attention to the fact that you can use just plain Javascript in many cases.

Is vanilla JS still used?

Short answer: Yes, vanilla JavaScript is still being used.


1 Answers

Here is the Vanilla JS version 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();

Ref: http://youmightnotneedjquery.com/

For JSONP SO already has the answer here

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

like image 54
Vicky Gonsalves Avatar answered Oct 22 '22 07:10

Vicky Gonsalves