提问人：Shane 提问时间：11/16/2023 最后编辑：Brian Tompsett - 汤莱恩Shane 更新时间：11/17/2023 访问量：33
在 JavaScript 中使用 Pokemon API 构建随机化器时，我需要帮助使 Pokemon 类型显示出来
I need help making Pokemon types show up when building a randomizer using a Pokemon API in JavaScript
问：
我对编程还很陌生，我正在使用 Pokemon API 在 JavaScript 中构建一个随机的 Pokemon 生成器，我无法使 Pokemon 类型显示在获取请求中，因为它嵌套在 API 的数组中。
我可以很好地获取 、 和值，因为它们在 API 中作为它们自己的单个值列出，但类型显示为因为它们列在数组中，我不太确定如何检索它们。这是我的代码和我正在使用的 API 的链接nameidbase experience[object Object]
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>答：
1赞
David
11/16/2023
#1
该属性是一个对象数组，例如：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
11/16/2023
#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，可以将每个类型的名称保存在字符串和字符串值中。
评论
type.innerText = pokemon.types.map(t => t.type.name).join(', ')- 顺便说一句，你应该使用而不是，你不会从 API 获取 HTML，所以没有理由允许格式化和潜在危险的数据！innerTextinnerHTML