Getting an uncaught error when trying to print an data array object in JavaScript

So I’m new to JS and doing an exercise where I wanna create a shopping cart. The requirement is to use “dynamic data source” and not hardcode attributes into the HTML so I’ve created this object that I want to just display in my HTML, for example the description, the image etc.. I got everything to work with “static” attributes in the HTML following a tutorial, but I wanna use a data-source instead since that is a more real case, where you’d update the data source and that would then automatically be updated on the webpage.

The error message is that I’ve declared the same variable twice but I dont really understand how? Since I only call products and don’t declare it again… also it just prints “object object object” in my HTML.

Uncaught SyntaxError: Identifier ‘products’ has already been declared (at store.js:1:1)

const products = [{
    "name": "Aloe Vera",
    "origin": "Netherlands",
    "description": "Some text",
    "height": "120cm",
    "image": "img/alovera.jpeg",
    "price": 100 + "kr"
  },
  {
    "name": "Hemp",
    "origin": "Denmark",
    "description": "some text",
    "height": "50-100cm",
    "image": "img/hemp.jpeg",
    "price": 200 + "kr"
  }
];


if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', ready)
} else {
  ready()
}

function ready() {
  for (var i = 0; i < products.length; i++) {
    var li = document.createElement("li");
    var text = document.createTextNode(products[i]);
    li.appendChild(text);
    document.getElementById("basket").appendChild(li);
    console.log(products[i]);
  }
}

<table class="table" id="basket">
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Antal</th>
      <th>Pris</th>
    </tr>
  </thead>
</table>

Answer

You can check the below implementation with dynamic headers and rows

I also left some useful comments there to solve possible issues you’re facing

const products = [{
    "name": "Aloe Vera",
    "origin": "Netherlands",
    "description": "Some text",
    "height": "120cm",
    "image": "img/alovera.jpeg",
    "price": 100 + "kr"
  },
  {
    "name": "Hemp",
    "origin": "Denmark",
    "description": "some text",
    "height": "50-100cm",
    "image": "img/hemp.jpeg",
    "price": 200 + "kr"
  }
];


if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', ready)
} else {
  ready()
}

function createRowData(product, attribute) {
  var rowData = document.createElement("td");
  const text = document.createTextNode(product[attribute]);
  rowData.appendChild(text);
  return rowData
}

//define column names
//keys are matched with product object
//values are matched with table header
const columnNames = {
  "name": "Produkt",
  "origin": "Antal",
  "price": "Pris"
}

function ready() {
  //add dynamic headers according to `columnNames` values
  const headerRow = document.createElement("tr");
  Object.values(columnNames).forEach((columnTitle) => {
    var rowData = document.createElement("th");
    const text = document.createTextNode(columnTitle);
    rowData.appendChild(text);
    headerRow.appendChild(rowData);
  })
  document.querySelector("#basket thead").appendChild(headerRow);

  //add dynamic rows according to `columnNames` keys aligned with product object
  for (let i = 0; i < products.length; i++) {
    const row = document.createElement("tr");

    Object.keys(columnNames).forEach((productAttribute) => {
      const rowData = createRowData(products[i], productAttribute);
      row.appendChild(rowData);
    });

    document.querySelector("#basket tbody").appendChild(row);
  }
}

<table class="table" id="basket">
  <thead></thead>
  <tbody></tbody>
</table>