Question

我已经被困在这个问题上几天了，只是想要一些帮助到达终点线。

我正在编写这个webapp，其中一个区域从NASA API中提取数据以显示图像等。

以下是我遇到问题的代码 -

{{1}}

在for循环中，如果我在索引括号中有“i”，则表示angular.js：14525 TypeError：无法读取未定义的属性“img_src”。

如果我将I更改为它返回的照片的索引编号之一，它可以工作并可以访问该索引img_src ...我不明白我的循环没有插入每个数字以将照片推送到然后我可以作为一个画廊操作的数组。请帮忙！

谢谢

Answer 1

在循环条件中，i <= $scope.roverdata.photos.length;将比较运算符更改为<。看起来它在循环的最后一次迭代中失败了 - 在那一点上，它正在寻找一个不存在的索引。

Answer 2

尝试删除＆＃34; =＆＃34;循环

 $http.get("https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=" + $scope.yyyy + "-" + $scope.mm + "-" + $scope.dd + "&camera=" + $scope.curCam + "&api_key=XXXXXXXXXXXXXXXXXXXXXXXXX")
    .then(function(response){
        console.log(response);
        $scope.roverdata = response.data
        console.log("this is the mars rover data: " + $scope.roverdata);
        console.log("these are the images: " + $scope.roverdata.photos[0].id);


    console.log("This is the length of the rover photos: " + $scope.roverdata.photos.length);

    //for loopo to push images returned
    //try remove "=" of cicle 
    for (var i = 0; i < $scope.roverdata.photos.length; i++) {
        //this isnt working below ---- figure out how to just push the img_src!
        $scope.roverphotos.push($scope.roverdata.photos[i].img_src);
    }
    console.log("These are the pushed rover photos: " + $scope.roverphotos);

    //just testing the image with the first item in the array, maybe use a loop to push all images returned into their own array and display a gallery-
    $scope.test2 = $scope.roverdata.photos[0].img_src;
}); //end $http.get function(response)

Answer 3

有人可能会有更好的答案（我很绿），但我想我已经遇到了这个问题并且可以帮助一点。首先，我确定你刚刚将它从代码中删除（可能没有），但是你还没有声明变量$scope.roverphotos，所以在你的循环中没有任何东西要推进。你可以尝试在循环之上声明它。

另外，你想用这些照片做什么？您是否将从API调用中获得的数组添加到现有数组中，以便继续收集它们？如果是这样，你已经在你发布的代码之上声明了变量，我不确定是什么问题。

您可以尝试的另一件事是使用map将变量设置为您想要的值：

$scope.roverphotos = $scope.roverdata.photos.map( function(photo) {
     return photo.img_src
}

这将以不同的方式实现相同的目标（我认为）。有时候我只是使用地图而且事物看起来效果更好（再次......我是新手）。

祝你好运！

循环迭代API JSON数据不起作用

3 个答案: