從API獲取產品詳細資訊時出錯-有解無憂

我一直在試圖找出可能出現問題的原因。

基本的 HTML 和 CSS 已經預先撰寫好，但 JavaScript 用于創建旨在填充 DOM 的核心元素（或專案）。

在我的腳本中，我試圖獲取產品資訊以使用購物專案填充瀏覽器界面。

我在控制臺中遇到的錯誤是：無法設定未定義的屬性（設定'innerText'）

async function fakeStoreAPI_Products () {
    const urlOfData = await fetch('https://fakestoreapi.com/products');
    if(urlOfData.status !== 200 || !urlOfData.ok){
        throw new Error('There was a problem fetching the data...')
    }else if(urlOfData.status === 200 && urlOfData.ok){
        const response = await urlOfData.json();
        populate(response)
    }
}

function populate (completeData) {
    const displayAllCardsHere = document.getElementById('cards_inner');    
    const data = completeData;
    
    for(const datum of data){
    // The parent
    const div_class_card = document.createElement('div')
    div_class_card.setAttribute('class', 'card')
    // Child [p_class_title]
    const p_class_title = document.createElement('p')
    p_class_title.setAttribute('class', 'title')
    // Child [img]
    const img = document.createElement('div')
    img.setAttribute('class', 'img')
    // Child [p_class_description]
    const p_class_description = document.createElement('p')
    p_class_description.setAttribute('class', 'description')
    // Child [div_class_cat_price] ~ With children
    const div_class_cat_price = document.createElement('div')
    div_class_cat_price.setAttribute('class', 'cat_price')
    // Children of [div_class_cat_price] ~ descendants of [div_class_card ~ The [grand] parent]
    const p_class_category = document.createElement('p')
    p_class_category.setAttribute('class', 'category')
    const p_class_price = document.createElement('p')
    p_class_price.setAttribute('class', 'price')
    
    p_class_title.innerText = datum['title']
    img.setAttribute('src', 'datum["image"]')
    p_class_description.innerText = datum['description']
    p_class_category.innerText = datum['category']
    p_class_price.innerText = datum['price']
    
    //div_class_card.insertAdjacentHTML('beforeend', p_class_title)
    div_class_card.append(p_class_title)
    //div_class_card.insertAdjacentHTML('beforeend', img)
    div_class_card.append(img)
    //div_class_card.insertAdjacentHTML('beforeend', p_class_description)
    div_class_card.append(p_class_description)
    
    //div_class_card.insertAdjacentHTML('beforeend', div_class_cat_price)
    div_class_card.append(div_class_cat_price)
    
    // Place children [p_class_category, p_class_price] into parent [div_class_cat_price]
    //div_class_cat_price.insertAdjacentHTML('beforeend', p_class_category)
    div_class_cat_price.append(p_class_category)
    //div_class_cat_price.insertAdjacentHTML('beforeend', p_class_price)
    div_class_cat_price.append(p_class_price)
    
    displayAllCardsHere.append(div_class_card)
}
}

fakeStoreAPI_Products().catch((err) => {
    console.log(err)
})

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Nunito Sans, Yu Gothic UI;
}

div#cards_outer{
    width: 100%;
    padding: 20px;
    display: grid;
    grid-row-gap: 20px;
}

div#heading{
    text-align: center;
}

div#heading span{
    font-size: 40px;
    font-weight: 600;
    /* hori verti blur colour */
    text-shadow: 0px 0px 6px #0007;
}

div#cards_inner{
    width: 100%;
    display: grid;
    grid-template: 1fr / repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
}

div#cards_inner div.card{
    /* hori verti blur color */
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7);
    padding: 10px;
}

div#cards_inner div.card img{
    width: 100%;
}

div#cards_inner div.card p.description{
    font-size: 14px;
    text-align: justify;
    word-wrap: break-word;
}

div#cards_inner div.card p.title,
div#cards_inner div.card div.cat_price p.category,
div#cards_inner div.card div.cat_price p.price{
    text-align: center;
}

div#cards_inner div.card p.title{
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
}

div#cards_inner div.card div.cat_price p.category,
div#cards_inner div.card div.cat_price p.price{
    font-size: 14px;
    font-weight: 600;
}

div#cards_inner div.card div.cat_price p.category{
    text-transform: capitalize;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito Sans&display=swap" />
    <title>Fetch data from API and display data on the browser</title>
</head>

<body>
    <div id="cards_outer">
        <div id="heading"><span>Fake API Store</span></div>
        <div id="cards_inner">
            <!-- populate cards here -->
        </div>
    </div>
</body>

</html>

我到底錯過了什么？

uj5u.com熱心網友回復：

問題是，您將變數設定為document.createElement('div').setAttribute('class', 'title')，但setAttribute('class', 'title')不回傳創建的 HTML 元素。

你應該這樣做：

// The parent
const div_class_card = document.createElement('div')
div_class_card.setAttribute('class', 'card')
// Child [p_class_title]
const p_class_title = document.createElement('p')
p_class_title.setAttribute('class', 'title')
// Child [img]
const img = document.createElement('img')
img.setAttribute('class', 'img')
// Child [p_class_description]
const p_class_description = document.createElement('p')
p_class_description.setAttribute('class', 'description')
// Child [div_class_cat_price] ~ With children
const div_class_cat_price = document.createElement('div')
div_class_cat_price.setAttribute('class', 'cat_price')
// Children of [div_class_cat_price] ~ decendants of [div_class_card ~ The [grand] parent]
const p_class_category = document.createElement('p')
p_class_category.setAttribute('class', 'category')
const p_class_price = document.createElement('p')
p_class_price.setAttribute('class', 'price')

首先創建元素并為其設定變數，然后使用變數設定屬性。

編輯：

未顯示影像，因為您在img變數中創建了一個 div 元素。并且 div 元素不處理 src 屬性。如果您執行以下操作，它應該可以作業：

// Child [img]
const img = document.createElement('img')
img.setAttribute('class', 'img')

此外，您將字串'datum["image"]'用作 src 屬性。應該是以下。

img.setAttribute('src', datum["image"])

uj5u.com熱心網友回復：

我的偏好是將 HTML 用于 HTML，然后使用 javascript 來操作/填充 HTML。從您的代碼來看，您的卡的內部結構并不是很明顯。使用<template>標簽來構建您的卡片。然后使用 javascript 填充模板的克隆，然后將其添加到 DOM。

我不僅發現將 HTML 作為 HTML 使用更容易，這也導致更簡單的 javascript。

/*Nothing has changed here, move along*/
async function fakeStoreAPI_Products() {
  const urlOfData = await fetch('https://fakestoreapi.com/products');
  if (urlOfData.status !== 200 || !urlOfData.ok) {
    throw new Error('There was a problem fetching the data...')
  } else if (urlOfData.status === 200 && urlOfData.ok) {
    const response = await urlOfData.json();
    populate(response)
  }
}

function populate(completeData) {
  const displayAllCardsHere = document.getElementById('cards_inner');
  //Get the template object
  const template = document.getElementById("cardTemplate");  
  //Clone it
  let clone = template.content.cloneNode(true);
  const data = completeData;

  /*This may not be doing what you think*/
  for (const datum of data) {
    /*Use query selectors to populate the clone*/
    clone.querySelector(".title").innerText = datum["title"];
    clone.querySelector(".img img").setAttribute("src", datum["image"]);
    clone.querySelector(".description").innerText = datum["description"];
    clone.querySelector(".cat_price .category").innerText = datum["category"];
    clone.querySelector(".cat_price .price").innerText = datum["price"];
    
    //Append clone to the DOM
    displayAllCardsHere.appendChild(clone);
  }
}

fakeStoreAPI_Products().catch((err) => {
  console.log(err)
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Nunito Sans, Yu Gothic UI;
}

div#cards_outer {
  width: 100%;
  padding: 20px;
  display: grid;
  grid-row-gap: 20px;
}

div#heading {
  text-align: center;
}

div#heading span {
  font-size: 40px;
  font-weight: 600;
  /* hori verti blur colour */
  text-shadow: 0px 0px 6px #0007;
}

div#cards_inner {
  width: 100%;
  display: grid;
  grid-template: 1fr / repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

div#cards_inner div.card {
  /* hori verti blur color */
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7);
  padding: 10px;
}

div#cards_inner div.card img {
  width: 100%;
}

div#cards_inner div.card p.description {
  font-size: 14px;
  text-align: justify;
  word-wrap: break-word;
}

div#cards_inner div.card p.title,
div#cards_inner div.card div.cat_price p.category,
div#cards_inner div.card div.cat_price p.price {
  text-align: center;
}

div#cards_inner div.card p.title {
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
}

div#cards_inner div.card div.cat_price p.category,
div#cards_inner div.card div.cat_price p.price {
  font-size: 14px;
  font-weight: 600;
}

div#cards_inner div.card div.cat_price p.category {
  text-transform: capitalize;
}

<div id="cards_outer">
  <div id="heading"><span>Fake API Store</span></div>
  <div id="cards_inner">
    <!-- populate cards here -->
  </div>
</div>
<template id="cardTemplate">
  <div class="card">
      <p class="title"></p>
      <div class="img"><img src=""/></div>
      <div class="description"></div>
      <div class="cat_price">
        <p class="category"></p>
        <p class="price"></p>        
      </div>
  </div>
</template>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/519360.html

標籤：javascripthtmlcss获取 API

上一篇：如何垂直增長塊以適應文本？

下一篇：僅當元素內部包含特定文本時才隱藏元素，使用JavaScript