當我嘗試將 Object 從 api 添加到我的 mongodb atlas db NODE.JS 時，我變得不確定

Question

我從第三方 API 獲得了一份寵物小精靈列表。我想在單擊添加按鈕時將特定的寵物小精靈添加到收藏夾列表中。 但是每當我嘗試渲染最喜歡的口袋妖怪列表時，我只會得到對象說未定義。

任何幫助，將不勝感激。

//Here i try to add the fetched object to my rest api//
 
function createPokemonCard(data) {
  const pokeContainer = document.getElementById("poke-container");
  const pokemonEl = document.createElement('div');
  pokemonEl.classList.add('pokemon');
  const pokeInnerHtml = `
<div class="img-container">
<img src="${data.sprites.front_default}">
</div>
<div class="pokeCard">
<h1 id="id">${data.id}</h1>
<h3 id="name">${data.name}</h3>
<h4 id="type">${data.types.map(type => type.type.name).join(", ")}</h4>
<button onclick="addFavourite()">Add</button>
</div>
`;
  pokemonEl.innerHTML = pokeInnerHtml;
  pokeContainer.appendChild(pokemonEl);
}

// i am trying to get the value//

async function addFavourite() {
  let name = document.getElementById('name').value ;
  let type = document.getElementById('type').value ;
  
  let data = {
      "name": name,
      "type": type
  }
  await fetch('https://web2-course-project-api-somrad.herokuapp.com/api/pokemons', {
      method: "POST",
      mode: 'cors',
      headers: {
          'Content-type': 'application/json; charset=utf-8'
      },
      body: JSON.stringify(data)
  });
  
}

// my back end post request//

pokemonRouter.route('/pokemons')
//POST YOUR FAVOURITE POKEMON
  .post((req, res)=>{
    const collection = db.collection("pokedex");
    collection.insertOne(req.body).then(
      () => {
        res.status(200).json({
          message: 'Added!'
        });
      }
    ).catch(
      (error) => {
        res.status(400).json({
          error: error
        });
      });
  })

這是我的收藏，前三個條目是手動添加的

Answer 1

該列表可能會打印“未定義”，因為數據庫提供的某些對象沒有名稱。

[
{"_id":"610d3316bf52a4e260126877","name":"Pikachu","type":"Electric"},
{"_id":"610e689defe3ad8654648ec3","name":"Charmander","type":"Fire"},
{"_id":"610e68acefe3ad8654648ec4","name":"Bulbasaur","type":"Grass"},
{"_id":"6118df7554b38705559eaacd"},
{"_id":"6118f0e493b20fefb0fd1689"},
{"_id":"6118f1e7128dd43ee68f8140"},
{"_id":"6118f2e8128dd43ee68f8141","name":"test","type":"grass"},
{"_id":"6118f57a128dd43ee68f8142"},
{"_id":"6118f5ca128dd43ee68f8143"},
{"_id":"6118f6a6128dd43ee68f8144"},
{"_id":"6118f6da128dd43ee68f8145"},
{"_id":"6118f6fd128dd43ee68f8146"},
{"_id":"6118f86f128dd43ee68f8147"},
{"_id":"6118f8e4128dd43ee68f8148"},
{"_id":"6118f924128dd43ee68f8149"},
{"_id":"6118fb34128dd43ee68f814a"}
]

這已經包括我的其他建議。

我建議您在渲染 rest 之前過濾掉無效的。

// your list with the pokemon before you create the html elements
// this simply removes all pokemon from the list that don't have a name or type
const yourList = [];
const yourFilteredList = yourList.filter(item => {

    if(item.name === undefined) return false;
    if(item.type === undefined) return false;

    return true;
})

另請注意，在 mongoDB 中，數據庫的主鍵是_id而不是id

<h1 id="id">${data._id}</h1>

這也可能是一個問題，因為您提供的 API 的類型字段是一個字符串，而不是指示的列表。 這可能會導致Uncaught TypeError: something.join is not a function

<h4 id="type">${data.types.map(type => type.type.name).join(", ")}</h4>