Parsing JSON from XmlHttpRequest responseJSON

Question

I m trying to parse a bit ly JSON response in javascript   I get the JSON via XmlHttpRequest   var req   new XMLHttpRequest    req overrideMimeType  application json      req open  GET   BITLY CREATE API   encodeURIComponent url              BITLY API LOGIN  true     var target   this    req onload    function    target parseJSON req  url      req send null    parseJSON  function req  url      if  req status    200          var jsonResponse   req responseJSON        var bitlyUrl   jsonResponse results url  shortUrl        I do this in a firefox addon  When I run I get the error  jsonResponse is undefined  for the line var bitlyUrl   jsonResponse results url  shortUrl   Am I doing anything wrong in parsing JSON here  Or what is wrong with this code

User · Answer

You can simply set xhr responseType    json     x000D   x000D  const xhr   new XMLHttpRequest    x000D  xhr open  GET    https   jsonplaceholder typicode com posts 1    x000D  xhr responseType    json   x000D  xhr onload   function e    x000D    if  this status    200    x000D      console log  response   this response      JSON response   x000D      x000D     x000D  xhr send    x000D     x000D   x000D   x000D    Documentation for responseType

User · Answer

Use nsIJSON if this is for a FF extension   var req   new XMLHttpRequest  req overrideMimeType  application json    req open  GET   BITLY CREATE API   encodeURIComponent url    BITLY API LOGIN  true   var target   this  req onload   function    target parseJSON req  url    req send null    parseJSON  function req  url    if  req status    200      var jsonResponse   Components classes   mozilla org dom json 1          createInstance Components interfaces nsIJSON decode req responseText     var bitlyUrl   jsonResponse results url  shortUrl      For a webpage  just use JSON parse instead of Components classes   mozilla org dom json 1   createInstance Components interfaces nsIJSON decode

User · Answer

Note  I ve only tested this in Chrome   it adds a prototype function to the XMLHttpRequest    XHR2   in XHR 1 you probably just need to replace this response with this responseText  Object defineProperty XMLHttpRequest prototype  responseJSON   value function     return JSON parse this response     writable false enumerable false      to return the json in xhr2  xhr onload function     console log this responseJSON         EDIT   If you plan to use XHR with arraybuffer or other response types then you have to check if the response is a string   in any case you have to add more checks e g  if it s not able to parse the json   Object defineProperty XMLHttpRequest prototype  responseJSON   value function     return  typeof this response    string  JSON parse this response  this response     writable false enumerable false

User · Answer

New ways I  fetch TL DR I d recommend this way as long as you don t have to send synchronous requests or support old browsers  A long as your request is asynchronous you can use the Fetch API to send HTTP requests  The fetch API works with promises  which is a nice way to handle asynchronous workflows in JavaScript  With this approach you use fetch   to send a request and ResponseBody json   to parse the response  fetch url     then function response        return response json            then function jsonResponse           do something with jsonResponse        Compatibility  The Fetch API is not supported by IE11 as well as Edge 12  amp  13  However  there are polyfills  New ways II  responseType As Londeren has written in his answer  newer browsers allow you to use the responseType property to define the expected format of the response  The parsed response data can then be accessed via the response property  var req   new XMLHttpRequest    req responseType    json   req open  GET   url  true   req onload    function        var jsonResponse   req response        do something with jsonResponse    req send null    Compatibility  responseType    json  is not supported by IE11  The classic way The standard XMLHttpRequest has no responseJSON property  just responseText and responseXML  As long as bitly really responds with some JSON to your request  responseText should contain the JSON code as text  so all you ve got to do is to parse it with JSON parse    var req   new XMLHttpRequest    req overrideMimeType  quot application json quot    req open  GET   url  true   req onload    function        var jsonResponse   JSON parse req responseText         do something with jsonResponse    req send null    Compatibility  This approach should work with any browser that supports XMLHttpRequest and JSON  JSONHttpRequest If you prefer to use responseJSON  but want a more lightweight solution than JQuery  you might want to check out my JSONHttpRequest  It works exactly like a normal XMLHttpRequest  but also provides the responseJSON property  All you have to change in your code would be the first line  var req   new JSONHttpRequest     JSONHttpRequest also provides functionality to easily send JavaScript objects as JSON  More details and the code can be found here  http   pixelsvsbytes com 2011 12 teach-your-xmlhttprequest-some-json   Full disclosure  I m the owner of Pixels Bytes  I thought that my script was a good solution for the original question  but it is rather outdated today  I do not recommend to use it anymore

User · Answer

I think you have to include jQuery to use responseJSON   Without jQuery  you could try with responseText and try like eval     req responseText        UPDATE Please read the comment regarding eval  you can test with eval  but don t use it in working extension   OR   use json parse   it does not use eval

[javascript] Parsing JSON from XmlHttpRequest.responseJSON

Examples related to javascript

Examples related to json

Examples related to firefox-addon

Examples related to bit.ly