Durante un [tutorial de ajax/json], solo tuve un error. Seguí el tutorial de principio a fin, pero al generar el valor del objeto para "nombre", seguí obteniendo un 'indefinido' para mi salida. La única forma en que pude hacer que generara "Rick" fue usando console.log (usuario [0]. nombre) en lugar de lo que tenía el tutorial, "console.log (usuario. nombre)". El usuario de var era JSON.parse según las instrucciones.
ARCHIVO JSON (usuario.json):
[ { "id": 1, "name": "Rick", "email": "rick@mail.com" } ]Archivo HTML (ajax2.html):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Ajax 2 - Local JSON</title> <style> *, html { background: #333; color: #eee; } </style> </head> <body> <button id="button1">Get User</button> <button id="button2">Get Users</button> <br /><br /> <h1><div id="user"></div></h1> <br /> <h2><div id="users"></div></h2> <script> function loadUser() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'user.json', true); xhr.onload = function() { if(this.status == 200) { var user = JSON.parse(this.responseText); console.log(user.name); // Output name "Rick" } } xhr.send(); } document.getElementById('button1').addEventListener('click', loadUser); </script> </body> </html>Sigo recibiendo un Indefinido. Pero codificando:
if(this.status == 200) { console.log(this.responseText); // Output the object key/values }Daría salida al objeto correctamente.
¿Alguna idea de por qué obtendría un indefinido? Estoy usando XAMPP y mi navegador Chrome también está actualizado.
Avíseme si necesito agregar alguna información. He buscado posibles respuestas, pero me acaba de llevar a una madriguera de conejo.
debe eliminar los corchetes del archivo user.json.
{ "id": 1, "name": "Rick", "email": "rick@mail.com" }