Render data from json file

[nenna]

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. 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();