javascript - Analizar JSON desde XmlHttpRequest.responseJSON

firefox-addon bit.ly

Question

Estoy tratando de analizar un bit.ly respuesta JSON en javscript.

Obtengo el JSON a través de 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;  
}

Hago esto en un complemento de Firefox. Cuando ejecuto obtengo el error "jsonResponse no está definido" para la línea var bitlyUrl = jsonResponse.results[url].shortUrl; . ¿Estoy haciendo algo mal al analizar JSON aquí? ¿O qué está mal con este código?

Answer 1

Creo que tienes que incluir jQuery para usar responseJSON .

Sin jQuery, puedes probar con responseText y como eval("("+req.responseText+")");

ACTUALIZACIÓN : lea el comentario con respecto a eval , puede hacer una prueba con eval, pero no lo use en la extensión de trabajo.

O

usa json_parse : no usa eval

Answer 2

Nota: sólo he probado esto en Chrome.

agrega una función de prototipo al XMLHttpRequest .. XHR2 ,

en XHR 1 es probable que solo necesites reemplazar this.response con this.responseText

Object.defineProperty(XMLHttpRequest.prototype,''responseJSON'',{value:function(){
 return JSON.parse(this.response);
},writable:false,enumerable:false});

para devolver el json en xhr2

xhr.onload=function(){
 console.log(this.responseJSON());
}

EDITAR

Si planea usar XHR con arraybuffer u otros tipos de respuesta, entonces debe verificar si la respuesta es una string .

en cualquier caso, debe agregar más controles, por ejemplo, si no es capaz de analizar el json.

Object.defineProperty(XMLHttpRequest.prototype,''responseJSON'',{value:function(){
 return (typeof this.response===''string''?JSON.parse(this.response):this.response);
},writable:false,enumerable:false});

Answer 3

Simplemente puede establecer xhr.responseType = ''json'';

const xhr = new XMLHttpRequest();
xhr.open(''GET'', ''https://jsonplaceholder.typicode.com/posts/1'');
xhr.responseType = ''json'';
xhr.onload = function(e) {
  if (this.status == 200) {
    console.log(''response'', this.response); // JSON response  
  }
};
xhr.send();
  

Documentación para responseType

Answer 4

Use nsIJSON si esto es para una extensión FF:

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

Para una página web, solo use JSON.parse lugar de Components.classes["@mozilla.org/dom/json;1"].createInstance(Components.interfaces.nsIJSON.decode

Answer 5

Nuevas formas I: fetch

TL; DR Lo recomendaría de esta manera siempre y cuando no tenga que enviar solicitudes síncronas o admitir navegadores antiguos.

Mientras su solicitud sea asíncrona, puede utilizar la API Fetch para enviar solicitudes HTTP. La API de recuperación funciona con promises , que es una buena manera de manejar flujos de trabajo asíncronos en JavaScript. Con este enfoque, usa fetch() para enviar una solicitud y ResponseBody.json() para analizar la respuesta:

fetch(url)
  .then(function(response) {
    return response.json();
  })
  .then(function(jsonResponse) {
    // do something with jsonResponse
  });

Compatibilidad: la API Fetch no es compatible con IE11, así como con Edge 12 y 13. Sin embargo, hay polyfills .

Nuevas formas II: responseType

Como Londeren escribió en su respuesta , los navegadores más nuevos le permiten usar la propiedad responseType para definir el formato esperado de la respuesta. Se puede acceder a los datos de respuesta analizados a través de la propiedad de response :

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

Compatibilidad: responseType = ''json'' no es compatible con IE11.

La forma clásica

El XMLHttpRequest estándar no tiene propiedad responseJSON , solo responseText y responseXML . Mientras Bitly realmente responda con algo de JSON a su solicitud, responseText debe contener el código JSON como texto, así que todo lo que tiene que hacer es analizarlo con JSON.parse() :

var req = new XMLHttpRequest();
req.overrideMimeType("application/json");
req.open(''GET'', url, true);
req.onload  = function() {
   var jsonResponse = JSON.parse(req.responseText);
   // do something with jsonResponse
};
req.send(null);

Compatibilidad: este enfoque debería funcionar con cualquier navegador que admita XMLHttpRequest y JSON .

JSONHttpRequest

Si prefiere usar responseJSON , pero desea una solución más liviana que JQuery, puede que desee revisar mi JSONHttpRequest. Funciona exactamente como un XMLHttpRequest normal, pero también proporciona la propiedad responseJSON . Todo lo que tienes que cambiar en tu código sería la primera línea:

var req = new JSONHttpRequest();

JSONHttpRequest también proporciona funcionalidad para enviar fácilmente objetos JavaScript como JSON. Más detalles y el código se pueden encontrar aquí: http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/ .

Revelación completa: soy el propietario de Pixels | Bytes. Creo que mi script es una buena solución al problema, así que lo publiqué aquí. Por favor, deja un comentario, si quieres que elimine el enlace.