Render data from Json file with innerHTML

[sezen]

This code is a part of a webshop. When I check the console, it returns allItems and also the qsArticle that I want to render with innerHTML but I know I’m missing something but don’t really understand what it is. Here is my code:

`
const queryString = new URLSearchParams(location.search);
const qsArticles = queryString.get(‘article’);
const productContainer = document.querySelector(’.product-info’);

let products = ; // Array to store the data in products.json
let allItems = ; // Array to store products that are copied ^

const getArticles = async () => {
const response = await fetch(’…/products.json’);
const data = await response.json();
products = […data.products];

  allItems.forEach(item => {
        if(item.id === qsArticles) {
        
              productContainer.innerHTML +=
        `<articel class="product-article "id=article-${item.id}>
              <h2>${item.name}</h2>
              <div class="article-content-wrapper">
              <div class="article-left-wrapper">
              <a href="../product/product.html?article=${item.id}"><img class="product-img" src=${item.image}></img></a>
              </div>
              <div class="article-right-wrapper">
              <p>Description: ${item.description}<p/>
              <br>
              <p>Price: ${item.price}<p/>
              <br>
              <button class="add-to-cart" id="addbtn-${item.id}">Köp</button>
              </div>
              </div>
              </article>`;
        }
  })

  products.forEach(product => {
        let items = product.items;
        items.forEach(item => {
              allItems.push(item);
        })
        
  })

  console.log(allItems);
  console.log(qsArticles);

}
getArticles();`