JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="table-responsive">
  <table class="table user-list">
    <thead>
      <tr>
        <th><span>USUÁRIOS</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><img src="https://bootdey.com/img/Content/user_1.jpg" alt="">Nome</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

//Usando javascript (Vanilla) ou jquery (já incluso), analisar o retorno JSON da API, criar um loop para compleetar a tabela com os users (avatar + nome);
/*DICA*/
//<tr><td><img src="'+data[i].avatar+'">'+data[i].first_name+' '+data[i].last_name+'</td></tr>

var api = 'https://reqres.in/api/users';


$.getJSON( api, function( resp ) {
  console.log('data',resp)
  var items = [];
  var users = resp.data
  $.each( users, function( i, data ) {
    items.push( '<tr><td><img src="'+data.avatar+'">'+data.first_name+' '+data.last_name+'</td></tr>');
  });
 
 console.log("items", items)
 
 /* $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "tbody" );
  */ 
  $("tbody").append(items);


});