dibujar en los datos html de una matriz json de api:
{ "data": [ { "_id": "126974b4-71f4-460d-a0b4-48f43d21e7c4", "name": "jose", "bet": 5, "__v": 0 }, { "_id": "c04515b7-8b25-4045-ba39-9cd19377a08b", "name": "rigo", "bet": 10, "__v": 0 } ] }Recibo respuesta de la API, en la consola del navegador.
{data: Array(2)}pero trato de revisar los datos obtenidos y mostrarlos en el html, pero no funciona, puse la URL del marcador de posición y funcionan normalmente. adjunto el codigo
código JS:
let url = `http://localhost:3000/api/v1/users`; fetch(url) .then( response => response.json() ) .then( data => mostrarData(data) ) .catch( error => console.log(error) ) const mostrarData = (data) => { console.log(data) let body = "" for (var i = 0; i < data.length; i++) { body+=`<tr><td>${data[i].id}</td><td>${data[i].name}</td><td>${data[i].email}</td></tr>` } document.getElementById('data').innerHTML = body //console.log(body) } <div class="container mt-4 shadow-lg p-3 mb-5 bg-body rounded"> <table class="table table-bordered table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody id="data"> </tbody> </table> </div>Intento atravesar con mapa y por ciclo, ninguno funciona, no sé si el JSON tiene que realizar una búsqueda diferente
nota: no puedo usar JQuery, solo JavaScript o axios
Parece que extraña que el objeto data tiene propiedad data . Por eso la línea data = data.data;
var data = { "data": [{ "_id": "126974b4-71f4-460d-a0b4-48f43d21e7c4", "name": "jose", "bet": 5, "__v": 0 }, { "_id": "c04515b7-8b25-4045-ba39-9cd19377a08b", "name": "rigo", "bet": 10, "__v": 0 } ] } const mostrarData = (data) => { // console.log(data) data = data.data; let body = "" for (var i = 0; i < data.length; i++) { body += `<tr><td>${data[i]._id}</td><td>${data[i].name}</td><td>${data[i].email}</td></tr>` } document.getElementById('data').innerHTML = body //console.log(body) } mostrarData(data) <div class="container mt-4 shadow-lg p-3 mb-5 bg-body rounded"> <table class="table table-bordered table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody id="data"> </tbody> </table> </div>