带有 JSON 数据的 AngularJS 多维数组答案

【问题标题】：AngularJS multidimensional arrays with JSON Data带有 JSON 数据的 AngularJS 多维数组
【发布时间】：2016-08-25 22:07:46
【问题描述】：

我正在尝试创建一个包含 6 个 JSON 响应的多维数组。我一直在寻找其他人的帮助：multidimensional array in angular

但是当我为多维数组测试控制台日志时，我得到输出“Stat array: undefined”，只调用整个数组的这个索引就会返回 [object Object]。

$scope.pokeArray = new Array(11);
        $http.get("http://pokeapi.co/api/v2/pokemon/"+searchedName +".json")
            .success(function (response)
                {
                    //Get first form FORMS array, assign name
                    $scope.pokeArray[0]  = response.forms[0].name;
                    //13 ID
                    $scope.pokeArray[1]  = response.id;
                    //10 Height
                    $scope.pokeArray[2]  = response.height;
                    //7 Sprites
                    $scope.pokeArray[3]  = response.sprites.front_default;
                    $scope.pokeArray[4]  = response.sprites.front_shiny;
                    //3 Stats 5-11
                    //Speed
                    $scope.pokeArray[5]  =  response.stats[1].base_stat;

                    //Index 6 = Array of 6
                    $scope.pokeArray[6] = [
                        {
                            speed    : response.stats[0].base_stat,
                            spDefense: response.stats[1].base_stat,
                            spAttack : response.stats[2].base_stat,
                            defense  : response.stats[3].base_stat,
                            attack   : response.stats[4].base_stat,
                            hp       : response.stats[5].base_stat
                        }];

                    console.log("Name: "  + response.forms[0].name);
                    console.log("Height: "+ response.height);
                    console.log("ID: "    + response.id);
                    console.log("Array: " + $scope.pokeArray);
                    console.log("speed: " + response.stats[1].base_stat);
                    console.log("Stat array: " + $scope.pokeArray[6].speed);
                }
            );
    }

如您所见，我的前 5 个数组都包含直接响应，并且效果很好，我已经使用控制台日志对其进行了测试，并在我的 html 视图中使用了这些信息。

目前，最后一个控制台日志返回“Stat array: undefined”。也许，我应该以不同的方式在多维度数组中进行响应，但我不确定，我想也许如果我尝试使用 [6][0] 来获得可行的速度？但这会导致错误。

如果有人能告诉我是我的数组还是 JSON 处理导致了问题，那真的会帮助我。谢谢。

【问题讨论】：

能看到response的序列化值吗？
你得到[object Object]. 因为你试图连接一个对象和一个字符串。发生这种情况时，将调用 toString() 方法，并且由于您的对象没有自定义 toString 方法，因此它使用默认方法，该方法将对象类型作为字符串提供给您。
@PatrickEvans 所以，如果所有数据都是字符串类型，ToString() 将被调用并且没有问题，所以输出不会是 [Object object]？

标签： javascript arrays angularjs json multidimensional-array

【解决方案1】：

您正在创建一个数组而不是创建一个对象，请执行以下操作：

$scope.pokeArray[6] = {
    speed    : response.stats[0].base_stat,
    spDefense: response.stats[1].base_stat,
    spAttack : response.stats[2].base_stat,
    defense  : response.stats[3].base_stat,
    attack   : response.stats[4].base_stat,
    hp       : response.stats[5].base_stat
};

【讨论】：

不错的收获。嵌套的 [ 和 { 括号创建一个包含单个对象的数组。
谢谢@Amit，所以我应该看待它的方式是不要在另一个数组的索引中创建数组，而是在一个索引中创建多个对象。
@Tecwyn - 我不知道你应该做什么，这取决于你的功能要求，但我知道你做错了什么，我向你展示了一种方法如何解决这个问题。
@Amit 没关系，我只是说我的概念是错误的。看错了，谢谢。
@Tecwyn - 很高兴为您提供帮助 ;-)

【解决方案2】：

angular.module('app',[]).controller('ctrl',function($scope,$http){
$scope.pokeArray = new Array(11);
        $http.get("http://pokeapi.co/api/v2/pokemon/charmander.json")
            .success(function (response)
                {
                    //Get first form FORMS array, assign name
                    $scope.pokeArray[0]  = response.forms[0].name;
                    //13 ID
                    $scope.pokeArray[1]  = response.id;
                    //10 Height
                    $scope.pokeArray[2]  = response.height;
                    //7 Sprites
                    $scope.pokeArray[3]  = response.sprites.front_default;
                    $scope.pokeArray[4]  = response.sprites.front_shiny;
                    //3 Stats 5-11
                    //Speed
                    $scope.pokeArray[5]  =  response.stats[1].base_stat;

                    //Index 6 = Array of 6
                    $scope.pokeArray[6] = [
                        {
                            speed    : response.stats[0].base_stat,
                            spDefense: response.stats[1].base_stat,
                            spAttack : response.stats[2].base_stat,
                            defense  : response.stats[3].base_stat,
                            attack   : response.stats[4].base_stat,
                            hp       : response.stats[5].base_stat
                        }];

                    console.log("Name: "  + response.forms[0].name);
                    console.log("Height: "+ response.height);
                    console.log("ID: "    + response.id);
                    console.log("Array: " + $scope.pokeArray);
                    console.log("speed: " + response.stats[1].base_stat);
                    console.log("Stat array: " + $scope.pokeArray[6][0].speed);
                });


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
{{pokeArray[6][0].speed}}

</div>

【讨论】：