Использование ng-repeat с Pokeapi

Я пытаюсь получить данные о двух случайных покемонах из Pokéapi. Я могу получить данные в порядке, но мои переменные angular $scope перезаписывают первого покемона вторым покемоном, а не сохраняют оба:

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

Вы можете визуально увидеть, что покемон загружается и отображается неправильно (два одинаковых покемона вместо двух разных) в этом Пример плункера.

Я мог бы вручную объявить две отдельные переменные $scope, например:

$scope.pokemonNameOne;
$scope.pokemonNameTwo;

Но я хочу использовать ng-repeat в разметке HTML, например:

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

Я чувствую, что то, что я должен делать, это перебирать необходимые данные из API, затем помещать их в новый массив, созданный мной, а затем использовать мой новый массив в сочетании с ng-repeat для отображения двух случайных покемон. Однако я не уверен, является ли это слишком запутанным решением. Должен ли я действительно воссоздавать данные API в своем собственном массиве? Такое ощущение, что это было бы изобретением велосипеда. Тем не менее, я не уверен, как еще решить эту проблему, кроме «Не используйте ng-repeat», что не является маршрутом, по которому я хочу пойти, если смогу помочь, поскольку я пытаюсь изучить Angular.

Должен ли я помещать данные API в собственный массив, чтобы отображать их правильно, или есть более разумный способ использовать ng-repeat?


arrays angularjs angularjs-ng-repeat ng-repeat
person Candlejack    schedule 20.09.2016    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вы заменяете существующие переменные вместо того, чтобы помещать их в массив. Сделайте что-то вроде этого:

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);
    });
}

и назовите это так:

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

См. этот отредактированный плункер

Также обратите внимание, что я изменил свойство pokemonPair на массив объектов, чтобы иметь возможность добавлять к нему свойства и использовать свойство ng-repeat.

person devqon    schedule 20.09.2016
comment
Это один из тех ответов, когда вы видите, что он написан перед вами, он кажется супер очевидным. Спасибо! - person Candlejack; 20.09.2016

arrow_upward
0
arrow_downward

Вот рабочий планкер: https://plnkr.co/edit/c5seK6wr8rQjMAj5GZA9?p=preview

Просто поместите ответ от API в массив и привяжите все оттуда!

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

Вы должны прочитать о массивах в JavaScript. Ваш вопрос на самом деле не связан с самим Angular.

    $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
Ваш ответ технически правильный, но если у меня есть объекты с несколькими атрибутами (имена, статистика и т. д.), я спрашивал, было ли помещение всего этого в новый массив, как в вашем примере, самым разумным/лучшим способом сделать это. Я знаю, что это можно сделать, мой вопрос был следует ли? - person Candlejack; 20.09.2016
comment
В этом случае вам нужно поместить объекты в этот массив, вот и все. Я думаю, что никто не может предложить вам что-нибудь еще в этом случае. Вот почему я написал, что это в основном не угловой вопрос) Я обновил свой ответ в соответствии с тем, что я имею в виду;) - person Andrey Degtyaruk; 21.09.2016