fetchAll 在 Javascript 中导致“无法读取属性”错误

Question

我的用户表中有一个包含“名字”和“姓氏”列的数据库。使用 Ajax，我想获取名称以 S 开头的所有用户，然后在列表中显示他们的名字和姓氏。所以它应该向我展示如下内容：

• 萨拉·安德森
• 肖恩·韦斯特

这是我用来获取用户列表的：

public function searchName($searchName)
{
    $pdo = Db::connect();
    $stmt = $pdo->prepare("SELECT firstname, lastname FROM users WHERE firstname LIKE :searchName OR lastname LIKE :searchName");
    $stmt->execute(['searchName' => '%' . $searchName . '%']);
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
    return $result;
}

这是我循环结果的 JS 函数

function viewResults(result) {
   const results = document.getElementById("results");
   results.innerHTML = "";

   for (let i = 0; i < result.length; i++) {
          const li = document.createElement("li");
          li.innerHTML = result['i'];
          results.appendChild(li);
   }
}

当我运行它时，它会显示正确数量的列表项，但是所有列表项都是“未定义”。我不能使用：

li.innerHTML = result['i']['firstname']['lastname'];

当我使用 fetch() 而不是 fetchAll() 时，上述内容确实可以正常工作，唯一的问题是 fetch() 只返回一个用户。我猜问题是 fetchAll() 在数组中返回一个数组？我尝试在我的 SQL 查询中同时使用 foreach 和 while，但都没有帮助。

Answer 1

问题出在以下行：

li.innerHTML = result['i'];

还有你尝试过的替代方案：

li.innerHTML = result['i']['firstname']['lastname'];

result 对象是一个数组，因此它没有名为“i”的属性。您需要使用变量i，而不是字符串文字“i”。所以访问result[i]。

其次，当您检索firstname 属性时，您将获得一个字符串。但随后您尝试找到该字符串的属性lastname 。这是行不通的。相反，您应该单独检索lastname，再次检索result[i]。

最后，分配纯文本时最好不要使用innerHTML。 innerHTML 用于分配 HTML 编码数据。对纯文本数据使用textContent。

所以，那一行应该是：

li.textContent = result[i].firstname + " " + result[i].lastname;

当使用带有解构的for...of 循环时，代码看起来会更好一些（我认为）：

function viewResults(result) {
   const results = document.getElementById("results");
   results.innerHTML = "";

   for (const { firstname, lastname } of result) {
       const li = document.createElement("li");
       li.textContent = firstname + " " + lastname;
       results.appendChild(li);
   }
}