การใช้ ng-repeat กับ Pokeapi

ฉันกำลังพยายามรับข้อมูลสำหรับโปเกมอนแบบสุ่มสองตัวจาก Pokéapi ฉันสามารถดึงข้อมูลได้ดี แต่ตัวแปร $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' ซึ่งไม่ใช่เส้นทางที่ฉันต้องการลงไปหากสามารถช่วยได้ เนื่องจากฉันกำลังพยายามเรียนรู้เชิงมุม

ฉันควรจะพุชข้อมูล 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 ไปยังอาร์เรย์และ databind ทุกอย่างจากที่นั่น!

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
ในกรณีนี้คุณต้องผลัก Objects ไปที่อาเรย์นั้นเท่านั้นเอง ฉันคิดว่าไม่มีใครสามารถแนะนำอะไรคุณได้อีกแล้วในกรณีนี้ นั่นเป็นเหตุผลที่ฉันเขียนว่าโดยพื้นฐานแล้วมันไม่ใช่คำถามเชิงมุม) ฉันอัปเดตคำตอบตามสิ่งที่ฉันหมายถึง ;) - person Andrey Degtyaruk; 21.09.2016