0

For an exercise I need to use this API : https://raw.githubusercontent.com/Laboratoria/LIM011-data-lovers/master/src/data/potter/potter.json and create an input where I can type a character's name and it will show below the information that is inside the class in the API, but I do not understand how to. I think the HTML is ok.

<body>
    <h1>Person of the day</h1>
    <h2>Choose a character</h2>
    <div class="form">
        <label for="choose">Choose</label> <br>
        <input list="list-people" type="text" name="choose" class="form-control" id="input" placeholder="Write here"/>
        <datalist id="list-people">
            <option value="Harry Potter">
            <option value="Hermione Granger">
            <option value="Ron Weasley">
            <option value="Draco Malfoy">
            <option value="Minerva McGonagall">
        </datalist>
        <button id="myBtn">Try it</button>
    </div>
    <section id="character"></section>
</body>

With this code I can only see the actor's name on the console, but not console.log :

const characterDom = document.getElementById('character');

let url = "https://raw.githubusercontent.com/Laboratoria/LIM011-data-lovers/master/src/data/potter/potter.json";

const fetchAll = url => {
  fetch(url)
    .then((res) => res.json())
    .then(data => {
      const result = data;
      console.log(result)
      document.getElementById("myBtn").addEventListener("click", displayName);

      function displayName() {
        document.getElementById("input").innerHTML = `$(actor.name[0])`;
        for (let actor of result) {

          console.log(actor.name);
          if (actor.name == document.getElementById("input").value) {

          }
        }
      }
    })
    .catch((error) => {
      console.error(error);
    });
}

fetchAll(url)

Getting: The text on the console instead of under the scroll input

Simone
  • 29
  • 7
  • 1
    Each `actor` is an object. You're setting the `innerHTML` to the default string representation of an object. You likely want to construct some HTML based on the actor *properties*. – Dave Newton Jul 28 '22 at 15:29
  • You're overwriting the HTML of the same element each time through the loop. You need to concatenate all of the characters into one big HTML string. – Barmar Jul 28 '22 at 15:30
  • You're only supposed to show one character, not all the characters. Your loop needs something like `if (actor.name == document.getElementById("input").value)` and then show the data of that character. – Barmar Jul 28 '22 at 15:35
  • @Barmar I have tried to add the If as you wrote. Then ```Console.log(actor.name)``` but nothing happened when i type inside the input the actor.name – Simone Jul 28 '22 at 16:11
  • @DaveNewton How can I construct more HTML on the actor properties? – Simone Jul 28 '22 at 16:12
  • You need to use an event listener to run this code after the user has filled in the form. Then you can type `Harry Potter` into the input, and compare that to `actor.name`. – Barmar Jul 28 '22 at 16:16
  • Also, if you want the actor name, it's in `actor.actor`. `actor.name` is the character name (e.g. `Harry Potter`). – Barmar Jul 28 '22 at 16:17
  • @Barmar . I changed like this : ```for(let actor of result) { if (actor.name == document.getElementById("input").value) { document.getElementById("myBtn").addEventListener("click", displayName); function displayName() { document.getElementById("input").innerHTML = `${actor.name}` }} }}) ``` – Simone Jul 28 '22 at 16:26
  • You have it backwards. The AJAX call should be in the event listener, you don't add the event listener in the loop. – Barmar Jul 28 '22 at 16:27
  • @Barmar for me is fine to have the name of the character in the scroll input, I can change those after. I have done all the pages with actor.name. I add the eventListener before the for. Now it's show the all actor's name on my console anytime i say try. How to console.log them? – Simone Jul 28 '22 at 16:45
  • Please edit the question and show what you're trying. Then I'll reopen and answer. – Barmar Jul 28 '22 at 16:49
  • @Barmar. Thanks for your help. I did really progress in the code with you. I updated the code on a new page request. This one somebody closed. https://stackoverflow.com/questions/73163439/innerhtml-does-not-work-as-i-would-like-and-dont-show-the-api-data – Simone Jul 29 '22 at 08:02

0 Answers0