当我尝试将 Object 从 api 添加到我的 mongodb atlas db NODE.JS 时，我变得不确定

Question

I get a list of pokemons from a third party API. I want to add specific ones to a favorites list when I click the add button. but whenever I try to render the list of favourite pokemon i just get objects saying undefined.

Any help would be appreciated.

//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
        });
      });
  })

this is my collection, the first three entries is added manually

Answer 1

The list probably prints "undefined" since some of the objects provided by the database don't have a name.

[
{"_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"}
]

This already includes my other suggestions.

I recommend that you filter out the invalid ones before rendering the 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;
})

Please also note that in mongoDB the Primary Key of the database is _id not id

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

This could also be an issue, since the type field of the API you provided is a string not a list as indicated. This may result in an Uncaught TypeError: something.join is not a function

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