Извлечение данных с использованием ajax и вставка в html с использованием простого javascript

Question

Я получил данные из моего php/products.php файла, используя ajax, и у меня есть html файл, который я уже стилизовал.Как вставить данные, извлеченные из файла products.php, на страницу html?

Большинство моих результатов поиска основаны на jQuery.

Используемые контейнеры - это контейнеры, стилизованные в файле css.

HTML

<div class="container">
      <header class="header">
         <center>
            <h1>Products</h1>
         </center>
      </header>
      <hr>
      <div id="products" class="products"></div>

      <button id="loadButton" class="btn">Load more</button>
   </div>

JS

var loadBtn = document.getElementById('loadButton');

loadBtn.addEventListener('click', fetchProducts);

function fetchProducts() {

   var xhr = new XMLHttpRequest;

   xhr.open('GET', `php/products.php?${q}`, true);

   xhr.onload = function () {
      if (this.status == 200) {
         var products = JSON.parse(this.responseText);

         var output, i;

         for (i = 0; i < products.length; i++) {
            output += `
                     <div id="pCard" class="p-card">
                           <p id="pName" class="p-name">${products[i].name}</p>
                           <p id="pAbout" class="p-about">${products[i].description}</p>
                     </div>
                     `;
         }

         console.log(products);

         document.getElementById('products').innerHTML = output;
      }
   }

   xhr.send();
}

PHP

include 'config.inc.php';

$sqlFetch = "SELECT id,item_name,item_description FROM items ORDER BY id ASC LIMIT 3";

$result = mysqli_query($connection, $sqlFetch);

$products = mysqli_fetch_all($result, MYSQLI_ASSOC);

echo json_encode($products);

Я ожидаю, что код для синтаксического анализа контейнеров, содержащих имя и описание продукта, в контейнере продуктов на странице HTML,При нажатии loadBtn я хочу, чтобы на веб-странице было загружено еще три продукта. Вместо этого я получаю сообщение об ошибке из консоли.

Answer 1

Проблема была в php/products.php?${q} в файле JS.

Я также нацеливался на name и description вместо item_name и item_description.

`
<div id="pCard" class="p-card">
  <p id="pName" class="p-name">${products[i].name}</p>
  <p id="pAbout" class="p-about">${products[i].description}</p>
</div>
`;