Don't bother me with your awesome framework, I simply want to retrieve data from a public API :-)

One credo, do simple things the simplest way possible...

You can test it here VanillaJS

Beware, don't copy and paste code on production, without asking yourself if it is safe or not.

For example, you have noticed, that my code does not allow any input from user.
If it was the case I would adopt another strategy...

Thanks Heiker :-)

let cible = document.getElementById("app");

let ligneUser = (info) => `
  <tr>
    <td><img src=${info.picture.thumbnail}></img></td>
    <td>${info.name.first}</td>
  </tr>`;

let footer = `
  <div>Vanilla JS only...</div>
`;

let tableau = (lignes) => `
  <table border="1">
    <tr>
      <th>Photo</th>
      <th>Name</th>
    </tr>
    ${lignes} 
    <tr class="footer">
      <td colspan="2">${footer}</td>
    </tr>
  </table>`;

function displayUsers(data) {
  const users = data.map(ligneUser).join("");
  cible.innerHTML = `
    ${tableau(users)}
  `;
}

async function getListUsers(numusers) {
  cible.innerHTML = "searching...";
  let resp = await fetch(`https://randomuser.me/api/?results=${numusers}`);
  let users = await resp.json();
  displayUsers(users.results);
}

getListUsers(6);

Blog

Don't bother me with your awesome framework, I simply want to retrieve data from a public API :-)

artydev

Join Our Newsletter. No Spam, Only the good stuff.

Related