Soy nuevo en JavaScript y solo estoy aprendiendo llamadas AJAX y analizando objetos JSON, así que sé que me falta algo obvio. Puedo recuperar la cadena JSON de mi API pero no puedo analizarla correctamente. No estoy seguro de si estoy enviando un objeto JSON que no se puede analizar o simplemente estoy tratando de leer los campos de manera incorrecta. Gracias por tomarse el tiempo de leer esto y su ayuda es muy apreciada. No sé a dónde ir después.

Puedo obtener la cadena JSON por this.responseText, pero cuando intento acceder al campo Título, solo me quedo indefenso. Estoy tratando de acceder de esta manera: this.responseText.title También he intentado: this.responseText [título] y this.responseText ["título"]

"{\"Id\":220,\"Title\":\"Drawtober 19\",\"YearCreated\":0,\"DatePublished\":\"2018-12-14T03:27:05.51\"}" 

Es lo que obtengo de la llamada AJAX y mi intento de obtener el título:

var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let x = this.responseText;
                let firstTest = JSON.parse(x[0]);
                let secondTest = JSON.parse(x.Title);
            }
        };
        xhttp.open("GET", "http://www.faithfulimagination.com/api/artwork/220", true);
        xhttp.send();
        }

Espero ver "Drawtober 19" y todo lo que obtengo es 'indefinido'

EDITAR

El problema estaba originalmente en mi API como señaló Barmar. Estaba llamando a JsonConvert.SerializeObject y devolviendo una cadena en lugar de devolver solo el objeto. Llamar a JSON.parse (x) dos veces funcionó perfectamente al igual que arreglar mi API y solo tener que llamarlo una vez.
¡Gracias a todos por responder tan rápido! Parece que todos entendieron mi problema de inmediato.

5
Charles Cole 11 may. 2019 a las 12:09

4 respuestas

La mejor respuesta

Su respuesta se codifica dos veces, por lo que debe decodificarla dos veces:

let data = JSON.parse(JSON.parse(x));
let title = data.Title;

No hay una buena razón para la doble codificación. Si fidelimagination.com es su sitio, debe solucionarlo.

5
Barmar 11 may. 2019 a las 09:13

Las solicitudes xhr devuelven solo cadenas json. Debe analizarlo en un objeto javascript antes de usarlo. Sin embargo, let firstTest = JSON.parse(x[0]); devuelve solo no válido porque el objeto x no es una matriz

var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let x = JSON.parse(this.responseText);
                //let firstTest = JSON.parse(x[0]); Invalid because x is not an array
                let secondTest = JSON.parse(x.Title);
            }
        };
        xhttp.open("GET", "http://www.faithfulimagination.com/api/artwork/220", true);

        xhttp.send();
        }
0
Nithin Chandran 11 may. 2019 a las 09:24

Simplemente use JSON.parse(x) para analizar el objeto completo:

const x = "{\"Id\":220,\"Title\":\"Drawtober 19\",\"YearCreated\":0,\"DatePublished\":\"2018-12-14T03:27:05.51\"}";
const res = JSON.parse(x);
console.log(res);
.as-console-wrapper { max-height: 100% !important; top: auto; }
0
Jack Bashford 11 may. 2019 a las 09:12

Debe analizar la cadena de respuesta en un objeto usando JSON.parse(this.responseText). Su propiedad estará en el objeto devuelto por ese método.

JSON.parse(this.responseText).Title
0
Steven Spungin 11 may. 2019 a las 09:12