嘗試在JavaScript中列印資料陣列物件時出現未捕獲的錯誤

所以我是 JS 的新手，正在做一個我想創建購物車的練習。要求是使用“動態資料源”而不是將屬性硬編碼到 HTML 中，所以我創建了這個我想在 HTML 中顯示的物件，例如描述、影像等。我得到了一切可以使用的東西在教程之后的 HTML 中的“靜態”屬性，但我想改用資料源，因為這是更真實的情況，您可以在其中更新資料源，然后在網頁上自動更新。

錯誤訊息是我已經兩次宣告了同一個變數，但我真的不明白怎么做？因為我只呼叫產品并且不再宣告它......它也只是在我的 HTML 中列印“物件物件物件”。

未捕獲的 SyntaxError：識別符號“產品”已被宣告（在 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>

uj5u.com熱心網友回復：

您可以使用動態標題和行檢查以下實作

我還在那里留下了一些有用的評論，以解決您可能面臨的問題

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>

uj5u.com熱心網友回復：

超級奇怪的是，當我運行這個應該發布這個的基本代碼時，我得到了同樣的錯誤......

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

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

還要列印“未定義”...

標籤：javascript html dom

上一篇：將RNN轉換為biRNN

下一篇：element.replaceChildren()函式是否適用于重復值，或者是什么阻止了它的作業