当我尝试将 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>