draw in the html data from a json array from api-CodePudding

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 >
    <table >
      <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

CodePudding user response：

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 >
  <table >
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="data">
    </tbody>
  </table>
</div>