Menggunakan ng-repeat dengan Pokeapi

Saya mencoba mendapatkan data untuk dua pokémon acak dari Pokéapi. Saya dapat mengambil datanya dengan baik, tetapi variabel sudut $scope saya menimpa pokémon pertama dengan pokémon kedua, alih-alih menyimpan keduanya:

$http.get(endPoint)
    .then(function(res){
        $scope.pokemonName = res.data.name; // only one 'pokemonName' in $scope
});

Anda dapat melihat secara visual pokémon dimuat dan ditampilkan dengan tidak benar (dua pokémon identik, bukan dua pokémon berbeda) di sini Contoh plunker.

Saya dapat mendeklarasikan dua variabel $scope terpisah secara manual, misalnya:

$scope.pokemonNameOne;
$scope.pokemonNameTwo;

Tapi saya ingin menggunakan ng-repeat di markup HTML, seperti ini:

<div class='pokemon' ng-repeat="pokemon in pokemonPair">
    <h2 class='name'>{{ pokemonName }}</h2>
    <img src='{{ pokemonImage }}' />
    <!-- etc -->
</div>

Saya merasa apa yang harus saya lakukan, adalah mengulang data yang diperlukan dari API, lalu memasukkannya ke dalam array baru buatan saya sendiri, dan kemudian menggunakan array baru saya dalam kombinasi dengan ng-repeat untuk menampilkan keduanya secara acak. pokemon. Namun, saya tidak yakin apakah ini solusi yang terlalu berbelit-belit. Haruskah saya membuat ulang data API di array saya sendiri? Rasanya seperti itu akan menciptakan kembali roda. Namun, saya tidak yakin bagaimana cara lain untuk mengatasi masalah ini selain 'Jangan gunakan ng-repeat', yang bukan merupakan rute yang ingin saya lalui jika saya dapat membantu, karena saya mencoba mempelajari Angular.

Haruskah saya memasukkan data API ke dalam array buatan saya sendiri untuk menampilkannya dengan benar, atau adakah cara yang lebih cerdas untuk menggunakan ng-repeat?


arrays angularjs angularjs-ng-repeat ng-repeat
person Candlejack    schedule 20.09.2016    source sumber

Jawaban (3)


arrow_upward
2
arrow_downward

Anda mengganti variabel yang ada, alih-alih memasukkannya ke dalam array. Lakukan sesuatu seperti ini:

function getStats(pokemonIndex){
    var pokemon = $scope.pokemonPair[pokemonIndex];
    $http.get(pokemon.endPoint)
        .then(function(res){
            pokemon.pokemonName = res.data.name;
            pokemon.pokemonExperience = res.data.base_experience;
            pokemon.pokemonImage = res.data.sprites.front_default;
            pokemon.pokemonStats = res.data.stats;

            console.log("pokemonName = " + pokemon.pokemonName);
    });
}

dan menyebutnya seperti ini:

function populateStats(){
    for (var i = 0; i < $scope.pokemonPair.length; i++){
        getStats(i);
    }
}

Lihat plunker yang telah diedit ini

Perhatikan juga bahwa saya telah mengubah properti pokemonPair menjadi array objek, agar dapat menambahkan properti ke dalamnya dan menggunakan ng-repeat.

person devqon    schedule 20.09.2016
comment
Ini adalah salah satu jawaban yang ketika Anda melihatnya tertulis di depan Anda, rasanya sangat jelas. Terima kasih! - person Candlejack; 20.09.2016

arrow_upward
0
arrow_downward

Ini adalah plunker yang berfungsi: https://plnkr.co/edit/c5seK6wr8rQjMAj5GZA9?p=preview

Cukup dorong respons dari api ke dalam array dan ikat data semuanya dari sana!

function getStats(endPoint){
        $http.get(endPoint)
          .then(function(res){
            $scope.pokemons.push(res.data);
            console.log("pokemonName = " + $scope.pokemonName);
        });
    }
person Amygdaloideum    schedule 20.09.2016

arrow_upward
0
arrow_downward

Anda harus membaca tentang Array di JavaScript. Pertanyaan Anda sebenarnya tidak terkait dengan Angular itu sendiri.

    $scope.pokemonNames = [];
    $http.get(endPoint)
    .then(function(res){
        var pokemon = {};
        pokemon.name = res.data.name;
        pokemon.attribute = res.data.attribute;
        $scope.pokemonNames.push(pokemon); // then iterate over pokemonNames array in ng-repeat.
});
person Andrey Degtyaruk    schedule 20.09.2016
comment
Jawaban Anda secara teknis benar, tetapi jika saya memiliki objek dengan banyak atribut (nama, statistik, dll), saya bertanya apakah memasukkan semua ini ke dalam array baru sesuai contoh Anda adalah cara paling cerdas/terbaik untuk melakukannya. Saya tahu ini bisa dilakukan, pertanyaan saya adalah haruskah? - person Candlejack; 20.09.2016
comment
Dalam hal ini Anda harus mendorong Objek ke array itu, itu saja. Saya rasa tidak ada yang bisa menyarankan hal lain kepada Anda dalam kasus ini. Itu sebabnya saya menulis bahwa ini pada dasarnya bukan pertanyaan sudut) Saya memperbarui tanggapan saya sesuai dengan maksud saya ;) - person Andrey Degtyaruk; 21.09.2016