'Fetch API Not displaying Images properly - TV Show Website

I'm a beginner when it comes to coding and the biggest issue I have is to understand WHY something doesn't work (how to diagnose an error). I tried to combine what I learned from Colt Steele on Udemy with fetch API and so far, I've managed to make it work to list the NAMES of the movies when you search, but when I try to display the IMAGES, they seem to not work and it seems like it's trying to load them from my PC rather than from the TVMaze API. Here's my code:

function searchShow(query) {
    const url = `https://api.tvmaze.com/search/shows?q=${query}`;
    fetch(url)
        .then(response => response.json())
        .then((jsonData) => {
            const resultsNames = jsonData.map(element => element.show.name);
            const resultsImages = jsonData.map(e => e.show.image);
            console.log(resultsNames);
            renderResults(resultsNames);
            console.log(resultsImages);
            renderImages(resultsImages);
            document.getElementById("errorMessage").innerHTML = "";
        })
        .catch((error) => {
            document.getElementById("errorMessage").innerHTML = error;
        })
}

function renderResults(resultsNames) {
    const list = document.getElementById("resultsList");
    list.innerHTML = "";
    resultsNames.forEach(result => {
        const element = document.createElement("li");
        element.innerText = result;
        list.appendChild(element);

    });
}

function renderImages(resultsImages) {
    const list2 = document.getElementById("imagesDisplay");
    list2.innerHTML = "";
    resultsImages.forEach(result => {
        const imgShow = document.createElement("IMG");
        imgShow.src = result;
        list2.appendChild(imgShow);
    })
}



let searchTimeoutToken = 0;

window.onload = () => {
    const searchFieldElement = document.getElementById("searchField")
    searchFieldElement.onkeyup = (event) => {
        clearTimeout(searchTimeoutToken);
        searchTimeoutToken = setTimeout(() => {
            searchShow(searchFieldElement.value);
        }, 250);

    };
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TV Show</title>

</head>

<body>
    <h1>TV Search</h1>
    <input type="text" id="searchField" placeholder="Search a TV Show...">
    <ul id="resultsList"></ul>
    <ul id="imagesDisplay"></ul>
    <div id=" errorMessage">
    </div>




    <script src="script.js"></script>
</body>

</html>

Can you please help me understand why is this not working and also, how can I make it display in a list like this:

-Name of the show -Image of the show -2nd name of the 2nd show -2nd image of the 2nd show etc.

Thank you in advance!

javascript api

Solution 1:^[1]

If you look at your images, you will see the src as [object Object] instead of the url to your image. You need to access the property of your object, in this case there's a few to choose from that represent different sized images.

I've modified your snippet to get what you want.

function searchShow(query) {
  const url = `https://api.tvmaze.com/search/shows?q=${query}`;
  fetch(url)
    .then(response => response.json())
    .then((jsonData) => {
      let shows = jsonData.map(element => element.show);
      renderShows(shows);
      document.getElementById("errorMessage").innerHTML = "";
    })
    .catch((error) => {
      document.getElementById("errorMessage").innerHTML = error;
    })
}

function renderShows(shows) {
  const list = document.getElementById("resultsList");
  list.innerHTML = "";
  shows.forEach(show => {
    const element = document.createElement("li");
    const img = document.createElement("img");
    const text = document.createElement("span");
    
    img.src = show.image.original;
    text.innerText = show.name;
    
    element.appendChild(text);
    element.appendChild(img);
    
    list.appendChild(element);

  });
}

let searchTimeoutToken = 0;

window.onload = () => {
  const searchFieldElement = document.getElementById("searchField")
  searchFieldElement.onkeyup = (event) => {
    clearTimeout(searchTimeoutToken);
    searchTimeoutToken = setTimeout(() => {
      searchShow(searchFieldElement.value);
    }, 250);

  };
}

img {
  max-width: 100px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TV Show</title>

</head>

<body>
  <h1>TV Search</h1>
  <input type="text" id="searchField" placeholder="Search a TV Show...">
  <ul id="resultsList"></ul>
  <ul id="imagesDisplay"></ul>
  <div id="errorMessage">
  </div>




  <script src="script.js"></script>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shoejep

'Fetch API Not displaying Images properly - TV Show Website

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]