CODEWITHSUNDEEP
javascriptjqueryjson
oski369
oski369

Reputation: 267

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?

Upvotes: 24

Views: 30886

Answers (4)

StackOverflowUser
StackOverflowUser

Reputation: 1123

Here's another look at pmaddi's ES6 answer in case another example might help. This example shows code populating a field from the json response to an API call.

const that = this;
fetch( "https://apiyouwanttoinvoke.com" )
    .then( data => data.json() )
    .then( function( data ) {
    that.myField = data.jsonValImInterestedIn;
});

Upvotes: 0

pmaddi
pmaddi

Reputation: 489

ES6 has Fetch API which provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

It is easier than XMLHttpRequest.

fetch(url) // Call the fetch function passing the url of the API as a parameter
  .then(res => res.json())
  .then(function (res) {
    console.log(res)
    // 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
  });

Upvotes: 23

a.bjorkmann
a.bjorkmann

Reputation: 109

Here is a vanilla JS version of Ajax 

var $ajax = (function(){
    var that = {};
    that.send = function(url, options) {
        var on_success = options.onSuccess || function(){},
            on_error   = options.onError   || function(){},
            on_timeout = options.onTimeout || function(){},
            timeout    = options.timeout   || 10000; // ms

        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //console.log('responseText:' + xmlhttp.responseText);
                try {
                    var data = JSON.parse(xmlhttp.responseText);
                } catch(err) {
                    console.log(err.message + " in " + xmlhttp.responseText);
                    return;
                }
                on_success(data);
            }else{
                if(xmlhttp.readyState == 4){
                    on_error();
                }
            }
        };
        xmlhttp.timeout = timeout;
        xmlhttp.ontimeout = function () { 
            on_timeout();
        }
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    }
    return that;
})();

Example: 

$ajax.send("someUrl.com", {
    onSuccess: function(data){
        console.log("success",data);
    },
    onError: function(){
        console.log("Error");
    },
    onTimeout: function(){
        console.log("Timeout");
    },
    timeout: 10000
});

Upvotes: 7

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11717

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.

Upvotes: 38

Related Questions