尝试在 JavaScript 中打印数据数组对象时出现未捕获的错误

Question

所以我是 JS 的新手，正在做一个我想创建购物车的练习。要求是使用“动态数据源”而不是将属性硬编码到 HTML 中，所以我创建了这个对象，我只想在我的 HTML 中显示，例如描述、图像等.. 在教程之后，我得到了与 HTML 中的“静态”属性一起使用的所有内容，但我想改用数据源，因为这是一个更真实的情况，您可以在其中更新数据源，然后然后会在网页上自动更新。

错误信息是我已经声明了同一个变量两次，但我真的不明白怎么办？因为我只调用产品而不再声明它......它也只是在我的 HTML.

中打印“object object object”

未捕获语法错误：标识符 'products' 已声明（在 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 1

您可以使用动态 headers 和行

检查以下实现

我还在那里留下了一些有用的评论，以解决您可能遇到的问题

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>

Answer 2

超级奇怪的是，当运行这个基本代码应该 post 这个...

时，我得到了同样的错误

document.getElementById("basket").innerHTML = products.name;

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

同时打印“undefined”...

尝试在 JavaScript 中打印数据数组对象时出现未捕获的错误

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

html

javascript

dom