250929_fetch/07_poke.html at main · DevCoursePracticeProjects/250929_fetch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Poke</title>
  </head>
  <body>
    <script>
      // 1. API에서 데이터 호출하기
      async function getPokemon(id) {
        console.log(`${id}번 포켓몬을 불러옵니다`);
        const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`);
        const data = await response.json();
        console.log(data);
        // 이름 (영어)
        console.log(data.name);
        // 앞모습
        console.log(data.sprites.front_default);
        // 울음소리
        console.log(data.cries.latest);

        const response2 = await fetch(
          `https://pokeapi.co/api/v2/pokemon-species/${id}`
        );
        const data2 = await response2.json();
        // 한글 이름
        console.log(data2);
        console.log(data2.names); // 스페이스도 없고 특수문자도 없어서...
        console.log(data2.names.filter((v) => v.language.name === "ko"));
        console.log(
          data2.names.filter((v) => v.language.name === "ko")[0].name
        );
      }
      getPokemon(1);
    </script>
  </body>
</html>