How to fetch API and Display data in my html code? - Twitter API

Schadre
June 13, 2022
167 views
0 votes
2 Answers

I am extremely new to JS and API, nevertheless, I believe I get the overall process of API integration. I am struggling to figure out exactly what I did wrong here when trying to get the information to show up when you click the picture.

When I click the picture, the information shows up in my console, but it doesn’t show up with my picture. Am I missing a step? Or Should I post somewhere? Please attach any good resources I could refer to because I haven’t been successful in my own google search trying to understand what I am missing here. Maybe I am not searching the correct question.
This is my main.js

// Declarations for the Artwork
let art;
let showArtInfo;

//  The Art Institute of Chicago request - No user login needed because it's 
free... I think...


// Function to get Art Info when image figure is clicked
/**
 * @param art_index
 * @param info_index
 * 
 * The function gets art information from The Art Institute of Chicago using 
 the art_index of our gallery.
 * Then finds the correct info_index inside of the JSON response data from 
 The Art Institute
 * of Chicago which will produce a description that will be shown when you 
 click the art.
 */

async function clickedEvent(art_index, info_index) {
    //  Get Art Id
    let id = document.getElementsByTagName('img')[art_index].attributes[2].value;

   let headers = new Headers([
    ['Content-Type', 'application/json'],
    ['Accept', 'application/json']
]);

let request = new Request(`https://api.artic.edu/api/v1/artworks/${id}? 
    fields=id,title,artist_display,date_display,main_reference_number`, {
    method: 'GET',
    headers: headers
});
let result = await fetch(request);
let response = await result.json();
console.log(response)

if (showArtInfo){
    stopShow();
}
}


 /**
  * @param id
  * @param event
  * 
  * id = image id for gallery image
  * event = Mouse event given by the action from our user
  * 
  * Function produces art information from the clickedEvent based 
  * on index of image.
  */

 function getArt(id, event){
        switch(id){
    case 'blackmirror' : {
        event.stopPropagation();
        clickedEvent(0,0)
        break;
    }
    case 'manymansions' : {
        event.stopPropagation();
        clickedEvent(1,0)
        break;
    }
    case 'nightlife' : {
        event.stopPropagation();
        clickedEvent(2,0)
        break;
    }
    case 'room' : {
        event.stopPropagation();
        clickedEvent(3,0)
        break;
    }
    case 'opo' : {
        event.stopPropagation();
        clickedEvent(4,0)
        break;
    } 
    case 'weaving' : {
        event.stopPropagation();
        clickedEvent(5,0)
        break;
    }
  }
 }

This is my index.html

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
<title>Art</title>
</head>
<body>
    <!-- Navbar Section -->
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark py-3 fixed-top shadow-lg">
        <div class="container">
            <a href="#" class="navbar-brand">For the love of Art</a>
            <button 
                class="navbar-toggler" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#navmenu"
            ><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navmenu">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a href="#126414" class="nav-link">Espejo Negro</a>
                    </li>
                    <li class="nav-item">
                        <a href="#137125" class="nav-link">Many Mansions</a>
                    </li>
                    <li class="nav-item">
                        <a href="#117266" class="nav-link">Nightlife</a>
                    </li>
                    <li class="nav-item">
                        <a href="#191556" class="nav-link">The Room No. VI</a>
                    </li>
                    <li class="nav-item">
                        <a href="#102611" class="nav-link">Veranda Post</a>
                    </li>
                    <li class="nav-item">
                        <a href="#151363" class="nav-link">Weaving</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <br>
    <!--Start of Container For Artwork-->
    <div class="container">
        <div class="gallery">
            <br>
            <figure class="gallery__item gallery__item--1" id="blackmirror" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img class="gallery__img shadow-lg" src="images/black-mirror.jpeg" alt="126414">
            </figure>
                <br>
            <figure class="gallery__item gallery__item--2" id="manymansions" onclick="event.stopPropagation(); getArt(this.id, event)" >
                <img class="gallery__img shadow-lg" src="/images/many-mansions.jpeg" alt="137125">
            </figure>
                <br>
            <figure class="gallery__item gallery__item--3" id="nightlife" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img class="gallery__img shadow-lg" src="images/nightlife.jpeg" alt="117266">
            </figure>
                <br>
            <figure class="gallery__item gallery__item--4" id="room" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img class="gallery__img shadow-lg" src="images/the-room-no-vi.jpeg" alt="191556">
            </figure>
                <br>
            <figure class="gallery__item gallery__item--5" id="opo" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img class="gallery__img shadow-lg" src="images/veranda-post-opo-ogoga.jpeg" alt="102611">
            </figure>
                <br>
            <figure class="gallery__item gallery__item--6" id="weaving" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img class="gallery__img shadow-lg" src="images/weaving.jpeg" alt="151363">
            </figure>
        </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
</body>
</html>```

Answers

- ChristianSmith
- June 13, 2022 at 3:47 am
- 0 votes
0
Looks like you got the API integration working fine. However how are you actually planning to show the data once an image is clicked? That seems to be the main problem at the moment is that once the data is requested nothing is done with it.

One simple way you could do so is add an element where you want to display the data and then in your clickedEvent() method just select the element and display the result of the api request. I made a quick jsfiddle you can refer to for this.

html element
```
<div id="apiResponse">
</div>
```
updated clickedEvent method
```
let result = await fetch(request);
let apiResponse = await result.json();

console.log(apiResponse)
document.getElementById('apiResponse').innerHTML = JSON.stringify(apiResponse);
```
https://jsfiddle.net/bkwnthrm/4/
Login or Signup to reply.

You can create a new div element, populate it with required data using innerHTML and use appendChild method to add the div to the parent element.

// Declarations for the Artwork
let art;
let showArtInfo;

//  The Art Institute of Chicago request - No user login needed because it's 
//free... I think...


// Function to get Art Info when image figure is clicked
/**
 * @param art_index
 * @param info_index
 * 
 * The function gets art information from The Art Institute of Chicago using 
 the art_index of our gallery.
 * Then finds the correct info_index inside of the JSON response data from 
 The Art Institute
 * of Chicago which will produce a description that will be shown when you 
 click the art.
 */

async function clickedEvent(art_index, info_index) {
  //  Get Art Id
  let elem = document.getElementsByTagName('img')[art_index]
  let id = elem.attributes[2].value;

  let headers = new Headers([
    ['Content-Type', 'application/json'],
    ['Accept', 'application/json']
  ]);

  let request = new Request(`https://api.artic.edu/api/v1/artworks/${id}? 
    fields=id,title,artist_display,date_display,main_reference_number`, {
    method: 'GET',
    headers: headers
  });
  let result = await fetch(request);
  let response = await result.json();
  console.log(response)

  if (showArtInfo) {
    stopShow();
  } else{
    let title = response.data.title;
    let artist = response.data['artist_display']
    let date = response.data['date_display']
    let div = document.createElement("div");
    div.innerHTML = `Title: ${title}<br>Artist: ${artist}<br>Date Display: ${date}`;
    elem.parentElement.appendChild(div);
  }
}


/**
 * @param id
 * @param event
 * 
 * id = image id for gallery image
 * event = Mouse event given by the action from our user
 * 
 * Function produces art information from the clickedEvent based 
 * on index of image.
 */

function getArt(id, event) {
  switch (id) {
    case 'blackmirror':
      {
        event.stopPropagation();
        clickedEvent(0, 0)
        break;
      }
    case 'manymansions':
      {
        event.stopPropagation();
        clickedEvent(1, 0)
        break;
      }
    case 'nightlife':
      {
        event.stopPropagation();
        clickedEvent(2, 0)
        break;
      }
    case 'room':
      {
        event.stopPropagation();
        clickedEvent(3, 0)
        break;
      }
    case 'opo':
      {
        event.stopPropagation();
        clickedEvent(4, 0)
        break;
      }
    case 'weaving':
      {
        event.stopPropagation();
        clickedEvent(5, 0)
        break;
      }
  }
}

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
<title>Art</title>
</head>
<body>
    <!-- Navbar Section -->
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark py-3 fixed-top shadow-lg">
        <div class="container">
            <a href="#" class="navbar-brand">For the love of Art</a>
            <button 
                class="navbar-toggler" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#navmenu"
            ><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navmenu">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a href="#126414" class="nav-link">Espejo Negro</a>
                    </li>
                    <li class="nav-item">
                        <a href="#137125" class="nav-link">Many Mansions</a>
                    </li>
                    <li class="nav-item">
                        <a href="#117266" class="nav-link">Nightlife</a>
                    </li>
                    <li class="nav-item">
                        <a href="#191556" class="nav-link">The Room No. VI</a>
                    </li>
                    <li class="nav-item">
                        <a href="#102611" class="nav-link">Veranda Post</a>
                    </li>
                    <li class="nav-item">
                        <a href="#151363" class="nav-link">Weaving</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <br>
    <!--Start of Container For Artwork-->
    <div class="container">
        <div class="gallery">
            <br>
            <figure class="gallery__item gallery__item--1" id="blackmirror" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img class="gallery__img shadow-lg" src="images/black-mirror.jpeg" alt="126414">
            </figure>
                <br>
            <figure class="gallery__item gallery__item--2" id="manymansions" onclick="event.stopPropagation(); getArt(this.id, event)" >
                <img class="gallery__img shadow-lg" src="/images/many-mansions.jpeg" alt="137125">
            </figure>
                <br>
            <figure class="gallery__item gallery__item--3" id="nightlife" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img class="gallery__img shadow-lg" src="images/nightlife.jpeg" alt="117266">
            </figure>
                <br>
            <figure class="gallery__item gallery__item--4" id="room" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img class="gallery__img shadow-lg" src="images/the-room-no-vi.jpeg" alt="191556">
            </figure>
                <br>
            <figure class="gallery__item gallery__item--5" id="opo" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img class="gallery__img shadow-lg" src="images/veranda-post-opo-ogoga.jpeg" alt="102611">
            </figure>
                <br>
            <figure class="gallery__item gallery__item--6" id="weaving" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img class="gallery__img shadow-lg" src="images/weaving.jpeg" alt="151363">
            </figure>
        </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
</body>
</html>```

Please signup or login to give your own answer.

Click here to cancel reply.

How to fetch API and Display data in my html code? – Twitter API

Answers