draw in the html data from a json array from 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
}
]
}
I get response from the api, in browser console
{data: Array(2)}
but I try to go through the obtained data and show it in the html, but it doesn't work, I put placeholder url and they work normally. I attach the code
code 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>I try to traverse with map and for cycle, neither works, I don't know if the JSON has to perform a different search
note: I can't use JQuery, only JavaScript or axios
You seem to miss that data object has data property. That's why the line 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>