admin管理员组文章数量:1383168
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(`/${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=".1.0/css/bootstrap.min.css">
<link rel="stylesheet" href=".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=".js/2.9.2/umd/popper.min.js"></script>
<script src=".1.0/js/bootstrap.min.js"></script>
</body>
</html>```
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./ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./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./ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
</body>
</html>```
2 Answers
Reset to default 2You 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./ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./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./ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
</body>
</html>```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/bkwnthrm/4/
本文标签： javascriptHow to fetch API and Display data in my html codeStack Overflow
版权声明：本文标题：javascript - How to fetch API and Display data in my html code? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743952680a2567576.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论