Get JSON data from external URL and display it in a div as plain text

Question

I have an external resource similar to https   www googleapis com freebase v1 text en bob dylan which returns a JSON  I want to display the value of result key in a div in html  lets say the name of the div is  summary    Also the value of result key should be displayed in plain text  The URL returns the json          result    Bob Dylan  born Robert Allen Zimmerman  is an American   singer-songwriter  author  poet  and painter  who has been a major   figure in popular music for five decades  Much of Dylan s most   celebrated work dates from the 1960s  when he became an              The JSON has just the result key  no other keys Basically I do not want to use anything other than plain HTML and JavaScript  I am a relative beginner to JavaScript and therefore I ask for commented code

User · Answer

You can use   ajax call to get the value and then put it in the div you want to  One thing you must know is you cannot receive JSON Data  You have to use JSONP   Code would be like this   function CallURL            ajax           url   https   www googleapis com freebase v1 text en bob dylan           type   GET           dataType   jsonp           async  false          success  function msg                 JsonpCallback msg                      error  function                  ErrorFunction                         function JsonpCallback json         document getElementById  summary   innerHTML   json result

User · Answer

Here is one without using JQuery with pure JavaScript  I used javascript promises and XMLHttpRequest You can try it here on this fiddle  HTML   lt div id  result  style  color red  gt  lt  div gt    JavaScript  var getJSON   function url      return new Promise function resolve  reject        var xhr   new XMLHttpRequest        xhr open  get   url  true       xhr responseType    json       xhr onload   function           var status   xhr status        if  status    200            resolve xhr response           else           reject status                      xhr send              getJSON  https   www googleapis com freebase v1 text en bob dylan   then function data        alert  Your Json result is       data result     you can comment this  i used it to debug      result innerText   data result    display the result in an HTML element    function status      error detection       alert  Something went wrong

User · Answer

Since the desired page will be called from a different domain you need to return jsonp instead of a json      get  http   theSource    callback           jsonp    function data            summary   text data result

User · Answer

If you want to use plain javascript  but avoid promises  you can use Rami Sarieddine s solution  but substitute the promise with a callback function like this   var getJSON   function url  callback        var xhr   new XMLHttpRequest        xhr open  get   url  true       xhr responseType    json       xhr onload   function           var status   xhr status        if  status    200            callback null  xhr response           else           callback status                      xhr send         And you would call it like this   getJSON  https   www googleapis com freebase v1 text en bob dylan   function err  data      if  err    null        alert  Something went wrong      err       else       alert  Your Json result is       data result       result innerText   data result

User · Answer

You can do this with JSONP like this   function insertReply content        document getElementById  output   innerHTML   content        create script element var script   document createElement  script       assing src with callback name script src    http   url to json callback insertReply      insert script to document and load content document body appendChild script     But source must be aware that you want it to call function passed as callback parameter to it   With google API it would look like this   function insertReply content        document getElementById  output   innerHTML   content        create script element var script   document createElement  script       assing src with callback name script src    https   www googleapis com freebase v1 text en bob dylan callback insertReply      insert script to document and load content document body appendChild script     Check how data looks like when you pass callback to google api  https   www googleapis com freebase v1 text en bob dylan callback insertReply  Here is quite good explanation of JSONP  http   en wikipedia org wiki JSONP

User · Answer

To display the Json data using Robin Hartman code  You need to add  the below line    The code he gave gives you Object  object  this code retrieves the data in a better way   result innerText  JSON stringify data

User · Answer

Since it s an external resource you d need to go with JSONP because of the Same origin policy  To do that you need to add the querystring parameter callback     getJSON  http   myjsonsource callback     function data           Get the element with id summary and set the inner text to the result          summary   text data result

[javascript] Get JSON data from external URL and display it in a div as plain text

Examples related to javascript

Examples related to html

Examples related to json