代码之家 › 专栏 › 技术社区 › Shane

在Javascript中使用pokemon Api构建随机化器时,我需要帮助使pokemon类型显示出来

fetch-api fetch api javascript

Shane · 技术社区 · 2 年前

我对编程还是很陌生,我正在使用Pokemon API用JavaScript构建一个随机的Pokemon生成器,我很难让Pokemon类型显示在获取请求中,因为它位于API的数组中。

我可以去拿 name , id 和 base experience 值很好,因为它们在API中被列为自己的单独值,但类型显示为 [object Object] 因为它们列在一个数组中,我不太确定如何检索它们。这是我的代码和链接 API I'm using

const name = document.getElementById('name')
const id = document.getElementById('id')
const type = document.getElementById('type')
const baseexperience = document.getElementById('baseexperience')
const button = document.querySelector('.myButton');

button.addEventListener('click', (e) => {
  e.preventDefault()
  const randomPokemon = Math.ceil(Math.random() * 1017)
  fetch(`https://pokeapi.co/api/v2/pokemon/${randomPokemon}`)
    .then(response => response.json())
    .then(pokemon => {
      console.log(pokemon)
      name.innerHTML = pokemon['name']
      id.innerHTML = pokemon['id']
      type.innerHTML = pokemon['types']
      baseexperience.innerHTML = pokemon['base_experience']

    })

})

<body>

  <div id="name"></div>
  <div id="id"></div>
  <div id="type"></div>
  <div id="baseexperience"></div>

  <button class="myButton">Catch 'em all</button>
</body>

2 回复 | 直到 2 年前

David 2 年前

这个 types 属性是一个对象数组,例如:

"types": [
    {
        "slot": 1,
        "type": {
            "name": "bug",
            "url": "https://pokeapi.co/api/v2/type/7/"
        }
    },
    {
        "slot": 2,
        "type": {
            "name": "steel",
            "url": "https://pokeapi.co/api/v2/type/9/"
        }
    }
]

JavaScript没有违约将此数据表示为字符串的方式,而不是类似的方式 [object Object],[object Object] 。您需要指出要显示的内容。

例如,如果要将类型名称显示为逗号分隔的列表,可以 .map() 通过该数组将其投影到字符串列表中,然后 .join() 用逗号分隔那些字符串。像这样的东西:

type.innerHTML = pokemon['types'].map(type => type.type.name).join(', ')

编辑: 它似乎至少可以显示一个字符串数组,并将自动插入逗号:

type.innerHTML = pokemon['types'].map(type => type.type.name)

尽管你仍然可以使用 .join() 当然,为了可读性,在逗号后面加一个空格。您也可以修改逻辑以将它们显示为 <li> 中的元素 <ul> 等

-1

mehmet akif 2 年前

请尝试以下操作:

<script>
    const name = document.getElementById('name')
    const id = document.getElementById('id')
    const type = document.getElementById('type')
    const baseexperience = document.getElementById('baseexperience')
    const button = document.querySelector('.myButton');

    button.addEventListener('click', (e) => {

        const randomPokemon = Math.ceil(Math.random() * 1017)

        fetch(`https://pokeapi.co/api/v2/pokemon/${randomPokemon}`)
            .then(response => response.json())
            .then(pokemon => {
                let Totaltypes = pokemon.types.map(type => type.type.name)
                name.innerHTML = pokemon.name
                id.innerHTML = pokemon.id
                type.innerHTML = Totaltypes
                baseexperience.innerHTML = pokemon.base_experience

            })

    })


</script>

您正试图打印两个对象。使用Totaltypes,您可以将每个类型的名称保存在字符串和字符串值中。