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);

Comments

[Heiker]

But just ask yourself, is this safe?

[artydev]

Hy Heiker,

It was a joke :-), look at my previous posts.

But, for sure, for simple things like this one, for a personnal use, why bother ?
And it is safe as long as you don't request input from user, or you don't send sensitive informations.

I am very concerned by simplicity, and that is why my framework of choice is Mithril coupled with the Meiosis pattern.

Betwise, I am found of functional programming :-)

Regards

[Heiker]

I'm glad this is not a serious post.

I still think it would be a good idea to place a explicit warning. Because you never know who might want to copypaste your code.