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

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 >
        <div >
            <a href="#" >For the love of Art</a>
            <button 
                 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#navmenu"
            ><span ></span></button>
            <div  id="navmenu">
                <ul >
                    <li >
                        <a href="#126414" >Espejo Negro</a>
                    </li>
                    <li >
                        <a href="#137125" >Many Mansions</a>
                    </li>
                    <li >
                        <a href="#117266" >Nightlife</a>
                    </li>
                    <li >
                        <a href="#191556" >The Room No. VI</a>
                    </li>
                    <li >
                        <a href="#102611" >Veranda Post</a>
                    </li>
                    <li >
                        <a href="#151363" >Weaving</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <br>
    <!--Start of Container For Artwork-->
    <div >
        <div >
            <br>
            <figure  id="blackmirror" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img  src="images/black-mirror.jpeg" alt="126414">
            </figure>
                <br>
            <figure  id="manymansions" onclick="event.stopPropagation(); getArt(this.id, event)" >
                <img  src="/images/many-mansions.jpeg" alt="137125">
            </figure>
                <br>
            <figure  id="nightlife" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img  src="images/nightlife.jpeg" alt="117266">
            </figure>
                <br>
            <figure  id="room" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img  src="images/the-room-no-vi.jpeg" alt="191556">
            </figure>
                <br>
            <figure  id="opo" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img  src="images/veranda-post-opo-ogoga.jpeg" alt="102611">
            </figure>
                <br>
            <figure  id="weaving" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img  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>```

CodePudding user response：

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 >
        <div >
            <a href="#" >For the love of Art</a>
            <button 
                 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#navmenu"
            ><span ></span></button>
            <div  id="navmenu">
                <ul >
                    <li >
                        <a href="#126414" >Espejo Negro</a>
                    </li>
                    <li >
                        <a href="#137125" >Many Mansions</a>
                    </li>
                    <li >
                        <a href="#117266" >Nightlife</a>
                    </li>
                    <li >
                        <a href="#191556" >The Room No. VI</a>
                    </li>
                    <li >
                        <a href="#102611" >Veranda Post</a>
                    </li>
                    <li >
                        <a href="#151363" >Weaving</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <br>
    <!--Start of Container For Artwork-->
    <div >
        <div >
            <br>
            <figure  id="blackmirror" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img  src="images/black-mirror.jpeg" alt="126414">
            </figure>
                <br>
            <figure  id="manymansions" onclick="event.stopPropagation(); getArt(this.id, event)" >
                <img  src="/images/many-mansions.jpeg" alt="137125">
            </figure>
                <br>
            <figure  id="nightlife" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img  src="images/nightlife.jpeg" alt="117266">
            </figure>
                <br>
            <figure  id="room" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img  src="images/the-room-no-vi.jpeg" alt="191556">
            </figure>
                <br>
            <figure  id="opo" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img  src="images/veranda-post-opo-ogoga.jpeg" alt="102611">
            </figure>
                <br>
            <figure  id="weaving" onclick="event.stopPropagation(); getArt(this.id, event)">
                <img  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>```

CodePudding user response：

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/