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 функция для l oop результатов

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

Когда я запускаю это, он отображает правильное количество элементов списка, однако все элементы списка это "undefined" . Я не могу использовать:

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

Вышеуказанное работает нормально, когда я использую fetch () вместо fetchAll (), единственная проблема в том, что fetch () возвращает только одного пользователя. Я предполагаю, что проблема в том, что fetchAll () возвращает массив внутри массива? Я пробовал использовать как foreach, так и while в моем запросе SQL, но ничего из этого не помогло.

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 l oop с деструктуризацией:

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