+ Rispondi al messaggio
Visualizzazione dei risultati da 1 a 2 su 2

PokeData: Axios, Vue, JavaScript e HTML

  1. #1
    Mancu non è in linea Novello
    Ciao, sto cercando di creare un "PokeData" con Vue e PokeAPI, riesco ad ottenere il pokemon che voglio quando effettuo una ricerca nell'input, ma il nome e l'immagine del pokemon non vengono visualizzati nella pagina.
    codici:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
        <script src="https://kit.fontawesome.com/ea7aefc2e0.js" crossorigin="anonymous"></script>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
        <title>PokeData</title>
        <link rel="stylesheet" href="style.css">
        <link rel="shortcut icon" href="Img/pokeball.png" type="image/x-icon">
    </head>
    <body>
        <div id="contenitore">
            <header>
                <div class="logo">
                    <img src="/Img/pokeball.png">
                    <h1>PokeData</h1>
                </div>
                <div class="searchBox">
                    <input v-model="ricerca" type="text" class="searchBar" @keyup.enter="eseguiRicerca" placeholder="Type the pokemon's name (lowercase)">
                </div>
                <div class="sidenav">
                    <a href="#">1° Generazione</a>
                    <a href="#">2° Generazione</a>
                    <a href="#">3° Generazione</a>
                    <a href="#">4° Generazione</a>
                    <a href="#">5° Generazione</a>
                    <a href="#">6° Generazione</a>
                    <a href="#">7° Generazione</a>
                    <a href="#">8° Generazione</a>
                    <hr>
                    <a href="#">Starter</a>
                </div>
            </header>
            <main>
                <div class="box">
                    <div class="box1" v-for="pokemon in pokemons">
                        <img :src="pokemon.sprite" class="imgBox">
                        <div class="boxtxt">
                            <h2>{{name}}</h2>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    <script src="main.js"></script>
    </body>
    </html>
    
    JavaScript:
    var app = new Vue({
        el:'#contenitore',
        data: {
            ricerca:'',
            pokemons: []
        },
        methods: {
            eseguiRicerca() {
                axios.get('https://pokeapi.co/api/v2/pokemon/' + this.ricerca , 
                {
                }).then(function(risposta) {
                    app.pokemons = risposta.data;
                    risposta => risposta.json
                    console.log(risposta);
                })
                
            }
        }
    });
    
    lascio anche in allegato pokeAPI e la sua documentazione:
    https://pokeapi.co/docs/graphql
    https://pokeapi.co/

  2. #2
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Così a prima vista, il nome devi mostrarlo con {{pokemon.name}}, trattandosi di una proprietà del singolo Pokemon che stai trattando all'interno del ciclo v-for="pokemon in pokemons" e referenziando appunto tramite una variabile di nome pokemon.

    Per quanto riguarda lo sprite, guardando la documentazione sembra che ciascun Pokemon abbia una proprietà sprites, da cui si evince che hai più sprite e non uno solo, e gli URL dei diversi sprite sono memorizzati all'interno di proprietà di questo oggetto. Tu hai scritto "pokemon.sprite", quindi il nome della proprietà è apparentemente errato, e tutt'al più (a meno di non introdurre un ciclo sugli sprite del personaggio enumerando le chiavi dell'oggetto) se vuoi accedere all'URL di uno sprite predefinito, presumibilmente dovrai scrivere qualcosa del tipo pokemon.sprites.front_default (che contiene l'URL dello sprite predefinito frontale).

    Ciao!
    ℹ️ Leggi di più su _alka_ ...

+ Rispondi al messaggio

Potrebbero interessarti anche ...

  1. Html, css & javascript
    Da ash41 nel forum HTML, CSS e JavaScript
    Risposte: 0
    Ultimo Post: 22-06-2011, 18:42
  2. Compatibilità Dylog, Axios, Sybase con VMWare ESX
    Da positiveoutlook nel forum Networking e sicurezza
    Risposte: 2
    Ultimo Post: 06-06-2011, 14:00
  3. [HTML,Javascript]Leggere XML in HTML
    Da papy2 nel forum HTML, CSS e JavaScript
    Risposte: 1
    Ultimo Post: 03-09-2009, 20:54
  4. [HTML,Javascript]Pop-Up
    Da cippalippa nel forum HTML, CSS e JavaScript
    Risposte: 3
    Ultimo Post: 09-03-2008, 12:13
  5. [JavaScript] Apertura PDF da HTML
    Da cfava nel forum HTML, CSS e JavaScript
    Risposte: 1
    Ultimo Post: 26-04-2006, 22:12