.innerHTML 不能按我的意愿工作并且不显示 API 数据答案

【问题标题】：.innerHTML does not work as I would like and don't show the API data.innerHTML 不能按我的意愿工作并且不显示 API 数据
【发布时间】：2022-07-29 16:53:30
【问题描述】：

对于一个练习，我需要使用这个 API：https://raw.githubusercontent.com/Laboratoria/LIM011-data-lovers/master/src/data/potter/potter.json 并创建一个 input，我可以在其中输入一个角色的名称，它会显示在 API 类内部的信息下方，但我不明白如何。我认为 HTML 没问题。

<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>

使用此代码，我只能在控制台上看到演员的姓名，而不是看到他们出现在输入下方，在我创建的 <div> 上而不是 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 -->

获取：

【问题讨论】：

这部分`$(actor.name[0])`应该是`${actor.name[0]}`
@Cyclonecode 我试过了，但返回错误。它所做的工作是将document.getElementById('character').innerHTML = `${actor}`; 更改为``` ${actor.actor} ``` 并显示演员的姓名。现在到所有字符列表，为什么它显示[object Object]我不明白
stackoverflow.com/questions/4750225/…
您还尝试在for 循环之外使用actor，这当然行不通。
不太确定为什么要尝试将 innerHTML 设置为响应中第一个对象名称的名称？但是你需要改为${result[0].name}。 actor 也是一个对象，所以如果你想显示它的一部分，那么你需要做一些类似actor.name、actor.gender 等的操作。

标签： javascript node.js json api input

【解决方案1】：

我认为您需要将代码更改为这样才能按预期工作：

  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}`;
      }
    }
  }

【讨论】：