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, instead of seeing appear them under the input, on the <div> I create 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) {
          if (actor.name == document.getElementById("input").value) {
            console.log(actor);
            document.getElementById('character').innerHTML = `${actor}`;
          }
        }
      }
    })
    .catch((error) => {
      console.error(error);
    });
}

fetchAll(url)
<!-- end snippet -->

Getting:

The text on the console instead of under the scroll input

Simone
  • 29
  • 7
  • This part `\`$(actor.name[0])\`` should be `\`${actor.name[0]}\`` – Cyclonecode Jul 29 '22 at 08:07
  • @Cyclonecode I tried, but returns error. What it did work was changing the ```document.getElementById('character').innerHTML = `${actor}`;``` into ``` `${actor.actor}` ``` nad it shows the name of the actor. Now to all the character list, why does it show [object Object] I don t understand – Simone Jul 29 '22 at 08:14
  • https://stackoverflow.com/questions/4750225/what-does-object-object-mean – CBroe Jul 29 '22 at 08:18
  • 1
    You are also trying to use `actor` outside of your `for` loop, which of course, will not work. – Cyclonecode Jul 29 '22 at 08:41
  • 1
    Not really sure why you are trying to set the innerHTML to the name of the first object name in the response? But then you need to change to `${result[0].name}` instead. `actor` is also an object, so if you would like to display some part of it then you need to do something like `actor.name`, `actor.gender` and so on. – Cyclonecode Jul 29 '22 at 08:47
  • @Cyclonecode I thought I could show the Object as a list directly on the browser as i see it appear on the console, instead of add any key individually. – Simone Jul 29 '22 at 08:59

1 Answers1

2

I think you need to change your code to this for it to work as expected:

  function displayName() {
    // You cannot use 'actor' here since it is not yet declared
    document.getElementById('input').innerHTML = `${result[0].name}`;
    for (let actor of result) {
      // There is really no need to check the input value, since
      // you already now that it is set to the name of the first
      // actor in the response e.g. 'result[0].name' at this point
      if (actor.name === document.getElementById('input').value) {
        console.log(actor);
        // 'actor' is an object with properties which you need to access
        document.getElementById('character').innerHTML = `${actor.name} ${actor.gender}`;
      }
    }
  }
Cyclonecode
  • 29,115
  • 11
  • 72
  • 93