How to make a JSON call to a url

Question

I m looking at the following API   http   wiki github com soundcloud api oembed-api  The example they give is  Call   http   soundcloud com oembed url http 3A  soundcloud com forss flickermood amp format json   Response      html    lt object height   81           user   Forss    permalink   http     soundcloud com  forss  flickermood    title   Flickermood    type   rich    provider url   http     soundcloud com    description   From the Soulhack album       version  1 0   user permalink url   http     soundcloud com  forss    height  81   provider name   Soundcloud    width  0     What do I have to do to get this JSON object from just a url

User · Answer

You make a bog standard HTTP GET Request. You get a bog standard HTTP Response with an application/json content type and a JSON document as the body. You then parse this.

Since you have tagged this 'JavaScript' (I assume you mean "from a web page in a browser"), and I assume this is a third party service, you're stuck. You can't fetch data from remote URI in JavaScript unless explicit workarounds (such as JSONP) are put in place.

Oh wait, reading the documentation you linked to - JSONP is available, but you must say 'js' not 'json' and specify a callback: format=js&callback=foo

Then you can just define the callback function:

function foo(myData) { 
    // do stuff with myData
}

And then load the data:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = theUrlForTheApi;
document.body.appendChild(script);

User · Answer

Because the URL isn t on the same domain as your website  you need to use JSONP   For example   In jQuery      getJSON       http   soundcloud com oembed url http 3A  soundcloud com forss flickermood amp format js amp callback          function data               This works by creating a  lt script gt  tag like this one    lt script src  http   soundcloud com oembed url http 3A  soundcloud com forss flickermood amp format js amp callback someFunction  type  text javascript  gt  lt  script gt    Their server then emits Javascript that calls someFunction with the data to retrieve   someFunction is an internal callback generated by jQuery that then calls your callback

User · Answer

DickFeynman s answer is a workable solution for any circumstance in which JQuery is not a good fit  or isn t otherwise necessary  As ComFreek notes  this requires setting the CORS headers on the server-side  If it s your service  and you have a handle on the bigger question of security  then that s entirely feasible   Here s a listing of a Flask service  setting the CORS headers  grabbing data from a database  responding with JSON  and working happily with DickFeynman s approach on the client-side      usr bin env python  from   future   import unicode literals from flask      import Flask  Response  jsonify  redirect  request  url for from your model import   import os try      import simplejson as json  except ImportError      import json try      from flask ext cors import   except      from flask cors import    app   Flask   name      app before request def before request    try        Provided by an object in your model     app session   SessionManager connect   except      print  Database connection failed     app teardown request def shutdown session exception None       app session close      A route with a CORS header  to enable your javascript client to access    JSON created from a database query   app route   whatever-data    methods   GET    OPTIONS     cross origin headers   Content-Type    def json data        whatever list          results json    None     try            Use SQL Alchemy to select all Whatevers  WHERE size  gt  0          whatevers   app session query Whatever  filter Whatever size  gt  0  all           if whatevers and len whatevers   gt  0              for whatever in whatevers                    Each whatever is able to return a serialized version of itself                     Refer to your model                  whatever list append whatever serialize                   Convert a list to JSON                results json   json dumps whatever list      except SQLAlchemyError as e          print  Error  0   format e          exit 0       if len whatevers   lt  1 or not results json          exit 0      else            Because we used json dumps    rather than jsonify               we need to create a Flask Response object  here          return Response response str results json   mimetype  application json    if   name         main           NOTE Not suitable for production  As configured              your Flask service is in debug mode and publicly accessible        app run debug True  host  0 0 0 0   port 5001    http   localhost 5001    your model contains the serialization method for your whatever  as well as the database connection manager  which could stand a little refactoring  but suffices to centralize the creation of database sessions  in bigger systems or Model View Control architectures   This happens to use postgreSQL  but could just as easily use any server side data store      usr bin env python    Filename  your model py import time import psycopg2 import psycopg2 pool import psycopg2 extras from   psycopg2 extensions        import adapt  register adapter  AsIs from   sqlalchemy                 import update from   sqlalchemy orm             import   from   sqlalchemy exc             import   from   sqlalchemy dialects        import postgresql from   sqlalchemy                 import Table  Column  Integer  ForeignKey from   sqlalchemy ext declarative import declarative base  class SessionManager object        staticmethod     def connect            engine   create engine  postgresql   id passwd localhost mydatabase                                    echo   True          Session   sessionmaker bind   engine                                  autoflush   True                                  expire on commit   False                                  autocommit   False      session   Session       return session     staticmethod   def declareBase          engine   create engine  postgresql   id passwd localhost mydatabase   echo True        whatever metadata   MetaData engine  schema   public         Base   declarative base metadata whatever metadata        return Base  Base   SessionManager declareBase    class Whatever Base          Create  supply information about  and manage the state of one or more whatever                tablename              whatever      id                      Column Integer  primary key True      whatever digest         Column VARCHAR  unique True      best name               Column VARCHAR  nullable   True      whatever timestamp      Column BigInteger  default   time time        whatever raw            Column Numeric precision   1000  scale   0   default   0 0      whatever label          Column postgresql VARCHAR  nullable   True      size                    Column BigInteger  default   0       def   init   self                    whatever digest                         best name                         whatever timestamp   0                    whatever raw   0                    whatever label                         size   0           self whatever digest           whatever digest         self best name                 best name         self whatever timestamp        whatever timestamp         self whatever raw              whatever raw         self whatever label            whatever label        Serialize one way or another  just handle appropriately in the client        def serialize self           return                best name       self best name               whatever label  self whatever label               size            self size              In retrospect  I might have serialized the whatever objects as lists  rather than a Python dict  which might have simplified their processing in the Flask service  and I might have separated concerns better in the Flask implementation  The database call probably shouldn t be built-in the the route handler   but you can improve on this  once you have a working solution in your own development environment   Also  I m not suggesting people avoid JQuery  But  if JQuery s not in the picture  for one reason or another  this approach seems like a reasonable alternative    It works  in any case   Here s my implementation of DickFeynman s approach  in the the client    lt script type  text javascript  gt      var addr    dev yourserver yourorg tld      var port    5001       function Get whateverUrl           var Httpreq   new XMLHttpRequest       a new request         Httpreq open  GET  whateverUrl false           Httpreq send null           return Httpreq responseText                       var whatever list obj   JSON parse Get  http       addr         port     whatever-data          whatever qty   whatever list obj length      for  var i   0  i  lt  whatever qty  i              console log whatever list obj i  best name          lt  script gt    I m not going to list my console output  but I m looking at a long list of whatever best name strings    More to the point  The whatever list obj is available for use in my javascript namespace  for whatever I care to do with it     which might include generating graphics with D3 js  mapping with OpenLayers or CesiumJS  or calculating some intermediate values which have no particular need to live in my DOM

User · Answer

A standard http GET request should do it  Then you can use JSON parse   to make it into a json object    function Get yourUrl       var Httpreq   new XMLHttpRequest       a new request     Httpreq open  GET  yourUrl false       Httpreq send null       return Httpreq responseText                then  var json obj   JSON parse Get yourUrl    console log  this is the author name    json obj author name     that s basically it

User · Answer

In modern-day JS  you can get your JSON data by calling ES6 s fetch   on your URL and then using ES7 s async await to  quot unpack quot  the Response object from the fetch to get the JSON data like so   x000D   x000D  const getJSON   async url   gt      try       const response   await fetch url       if  response ok     check if response worked  no 404 errors etc           throw new Error response statusText        const data   await response json       get JSON from the response     return data     returns a promise  which resolves to this data value     catch error        return error         console log  Fetching data       getJSON  https   soundcloud com oembed url http 3A  soundcloud com forss flickermood amp format json   then data   gt      console log data      catch error   gt      console error error       x000D   x000D   x000D   The above method can be simplified down to a few lines if you ignore the exception error handling  usually not recommended as this can lead to unwanted errors    x000D   x000D  const getJSON   async url   gt      const response   await fetch url     return response json       get JSON from the response     console log  Fetching data       getJSON  https   soundcloud com oembed url http 3A  soundcloud com forss flickermood amp format json      then data   gt  console log data    x000D   x000D   x000D

User · Answer

It seems they offer a js option for the format parameter  which will return JSONP  You can retrieve JSONP like so   function getJSONP url  success         var ud          new Date          script   document createElement  script            head   document getElementsByTagName  head   0                     document documentElement       window ud    function data            head removeChild script           success  amp  amp  success data               script src   url replace  callback      callback     ud       head appendChild script       getJSONP  http   soundcloud com oembed url http 3A  soundcloud com forss flickermood amp format js amp callback     function data       console log data

[javascript] How to make a JSON call to a url?

Examples related to javascript

Examples related to json