Estoy tratando de mostrar varias matrices de un archivo JSON en un documento html, pero siempre obtengo errores como "indefinido" o que no muestra todas las matrices.
Aquí está mi json:
"accounts": [ { "website": "netflix.com", "username": "user@mail.com", "password": "aSecurePassword" } ]y aquí está mi .js y .html:
<h2>JSON Data to HTML</h2> <div id ="data" class="accounts"> <div class="website">website</div> <div class="user">user</div> <div class="password">pw</div> </div> <script type="text/javascript"> var mainContainer = document.getElementById("data"); var div = document.createElement("div"); fetch("./data.json") .then(function(response){ return response.json(); }) .then(function(data){ div.classList.add('website'); mainContainer.appendChild(div); div.innerHTML = "" + data.website }) </script>Se supone que el ejemplo codificado anterior agrega otra línea a la clase "cuentas" como esta:
<div class="website">website</div> <div class="user">user</div> <div class="password">pw</div> <div class="website">netflix.com</div>sin embargo, muestra "indefinido" en html y no entiendo por qué.
Como contiene su archivo json,
{ "accounts": [{ "website": "netflix.com", "username": "user@mail.com", "password": "aSecurePassword" }] }El código aquí en el último .then() debería ser
.then(function(data){ div.classList.add('website'); mainContainer.appendChild(div); div.innerHTML = "" + data.accounts[0].website })El objeto de datos contiene la cuenta de propiedad, que es una matriz con los objetos de su sitio web, como dijo @VLAZ.
Para mostrar todos sus datos, debe usar un bucle en el segundo, así:
.then(data => { data["accounts"].forEach(item => { // append the data to the html here // you can get the website using item.website } })En primer lugar, asegúrese de tener el formato json correcto. En tu caso, debería verse así:
{ "accounts": [ { "website": "netflix.com", "username": "user@mail.com", "password": "aSecurePassword" } ] }Luego puede crear un archivo con una extensión .json y guardar los datos allí.
En su .js, obtenga los datos de la siguiente manera, suponiendo que todo esté en la misma carpeta:
fetch("./json.json").then((response) => response.json().then((data) => { let mainContainer = document.createElement("div"); mainContainer.classList.add("website"); mainContainer.innerHTML = "Website"; let websiteDiv = document.createElement("div"); websiteDiv.classList.add("website"); websiteDiv.innerHTML = data.accounts[0].website; let userDiv = document.createElement("div"); userDiv.classList.add("user"); userDiv.innerHTML = data.accounts[0].username; let passwordDiv = document.createElement("div"); passwordDiv.classList.add("password"); passwordDiv.innerHTML = data.accounts[0].password; mainContainer.appendChild(userDiv); mainContainer.appendChild(passwordDiv); mainContainer.appendChild(websiteDiv); document.body.appendChild(mainContainer); }) );Ahora, esto debería funcionar en el caso de que solo tenga un registro. Si tiene varios registros, considere usar un bucle para que pueda iterar a través de todo su conjunto de datos.