How can i display the extracted json data on my webpage using a bootsrap card after pulling it from an external api

Rick Derick 0
Viewed 22

I really don't know how I can display the array JSON data on my webpage using a card. My code is shown below your help will be highly appreciated.

    <body>
    
        <h1> Users data</h1>
        <div class="card">
            
        </div>
       
        <script>
           const api_url = "https://api.airtable.com/v0/appBTaX8XIvvr6zEC/tblYPd5g5k5IKIc98?api_key=##";

async function getAirtable() {
  const response = await fetch(api_url);
  const data = await response.json();
  const allData = data.records.map((rec) => rec.fields);
  //   allData = [
  //     {
  //       Id: 79,
  //       Name: "Julia A. Robles",
  //       avatar:
  //         "https://s3.amazonaws.com/uifaces/faces/twitter/pixeliris/128.jpg",
  //       occupation: "Prosthodontist",
  //     },
  //     {
  //       Id: 29,
  //       Name: "Matthew H. Glover",
  //       avatar:
  //         "https://s3.amazonaws.com/uifaces/faces/twitter/flame_kaizar/128.jpg",
  //       occupation: "Transportation attendant",
  //     },
  //   ];
  console.log(allData);
}
</script>
</body>
javascript
1 Answers

There are few options. I chose using a template html element to be cloned and appended and have properties changed according to data. Then I do forEach of those.

var allData = [{
    Id: 79,
    Name: "Julia A. Robles",
    avatar: "https://randomuser.me/api/portraits/thumb/women/9.jpg",
    occupation: "Prosthodontist",
  },
  {
    Id: 29,
    Name: "Matthew H. Glover",
    avatar: "https://randomuser.me/api/portraits/thumb/women/19.jpg",
    occupation: "Transportation attendant",
  },
];

var template = document.querySelector("#card-template");
var container = document.querySelector(".cards")

allData.forEach(add_card);

function add_card(person) {
  var deep = true;
  var elem = template.firstElementChild.cloneNode(deep);
  elem.querySelector("img").setAttribute("src", person.avatar);
  elem.querySelector(".card-title").innerText = person.Name
  elem.querySelector(".card-text").innerText = person.occupation
  elem.querySelector("a").setAttribute("href", 'person/' + person.Id);
  container.appendChild(elem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div id="card-template" style="display:none">
  <div class="card text-center" style="width: 18rem;">
    <img src="..." class="card-img-top rounded-circle p-5">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

<div class="cards">
</div>

IT goldman0
Related