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

Posted 2023-03-23

【中文标题】fetchAll 在 Javascript 中导致“无法读取属性”错误

【英文标题】：fetchAll causes "Cannot read property" error in Javascript

【发布时间】：2020-07-08 19:50:16

【问题描述】：

我的用户表中有一个包含“名字”和“姓氏”列的数据库。使用 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，但都没有帮助。

【问题讨论】：

你试过li.innerHTML = result['i']['firstname'] +' ' + result[i]['lastname'];吗？我认为每个结果[i] 都有两个属性，即firstname 和latname，每个都应该单独访问。

@DhruvShah 感谢您的建议！我试过只使用 ['i']['firstname'] （省略姓氏），但这只是在控制台中给了我以下错误：TypeError: Cannot read property 'firstname' of undefined

在这种情况下，您可能需要检查result 中的内容。您可以尝试在viewResult 方法中添加console.log(result) 并检查result 中的内容是什么

【参考方案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);
   

【讨论】：

现在像魅力一样工作，非常感谢！感谢您花时间解释我做错了什么，现在说得通了:)