无法访问 HTML 中的嵌套 JSON 对象答案

【问题标题】：Can't access a nested JSON object in HTML无法访问 HTML 中的嵌套 JSON 对象
【发布时间】：2017-04-20 18:19:49
【问题描述】：

AngularJS V1.6.4

$scope.aCourse["name"] 已正确记录到控制台，但在 HTML 代码中没有填充到屏幕中。

$scope.getCourse = function(idd){
        $http.defaults.headers.common['Authorization'] = 'Basic ' + btoa($cookieStore.get('username') + ':' + $cookieStore.get('password')  );
        $http({
              method: 'GET',
              url: 'http://localhost:8080/course/'+idd,

            }).then(function successCallback(response) {
                $scope.aCourse = response.data;
                console.log($scope.aCourse["name"]);

                window.location = "/website-take-course.html";
              }, function errorCallback(response) {
                  alert("Course data in fetching failed");
              });
    }

HTML 代码：

<div class="page-section padding-top-none" ng-repeat="c in aCourse" >
            <div class="media media-grid v-middle">
              <div class="media-left">
                <span class="icon-block half bg-blue-300 text-white">1</span>
              </div>
              <div class="media-body" >
                <h1 class="text-display-1 margin-none" >{{c.name}}</h1>
              </div>
            </div>
            <br/>
            <p class="text-body-2">{{c.description}}</p>
          </div>

【问题讨论】：

发布你在console.log $scope.aCourse时看到的json
在开发者工具 - 控制台查看错误，或在网络选项卡中查看返回的响应是什么
你为什么要遍历一个 object (ng-repeat="c in aCourse") 这是错误的。而是尝试{{ aCourse.name }}
你检查答案了吗

标签： javascript html angularjs json

【解决方案1】：

根据您的帖子，看起来 $scope.aCourse 是一个对象，而不是一个数组。

如下修改，

<div class="page-section padding-top-none" ">
    <div class="media media-grid v-middle">
        <div class="media-left">
            <span class="icon-block half bg-blue-300 text-white">1</span>
        </div>
        <div class="media-body">
            <h1 class="text-display-1 margin-none">{ aCourse.name }}</h1>
        </div>
    </div>
    <br/>
    <p class="text-body-2">{{aCourse.description}}</p>
</div>

或使用类似的东西来迭代对象，

 <div ng-repeat="(key,value) in aCourse">
      {{key}} : {{value}}
  </div>

演示

var app = angular.module('filterApp', []);
app.controller('myCtrl', function($scope) {

    $scope.aCourse = {
      "content": "SO",
      "description": "Programmers"
    };

 
});

<!DOCTYPE html>
<html >
<head>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/1.4.7/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="filterApp" ng-controller="myCtrl">
    <div ng-repeat="(key,value) in aCourse">
     {{key}} : {{value}}
    </div>
</body>

</html>

【讨论】：

当数据是一个对象时，可以使用ng-repeat="(key, value) in data"。请解决这个问题
LOL @MazenMohamed 你 edit 你的问题，而不是其他人的答案
@OmriLuzon 我应该解释得更好
@Sajeetharan 当我尝试使用您的演示中包含的 json 对象时，它只有在我的“http”请求中的“.then”函数之外定义时才有效，如果我把它放在“.then”函数不起作用。
@MazenMohamed 与此无关，请检查您是否收到了 promise 中的数据

【解决方案2】：

可能有两种情况：

1. $scope.aCourse 是一个对象数组 [{},{},{}]。

演示

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.aCourse = [
      {
        "name": "alpha",
        "description" : "description1"
      },
      {
        "name": "beta",
        "description" : "description2"      
      },
      {
        "name": "gamma",
        "description" : "description3"      
      }
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div class="page-section padding-top-none" ng-repeat="c in aCourse" >
              <div class="media-body" >
                <h1 class="text-display-1 margin-none" >{{c.name}}</h1>
              </div>
            <p class="text-body-2">{{c.description}}</p>
          </div>
</div>

2. $scope.aCourse 是 Object {......}。

演示

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.aCourse = {
        "name": "alpha",
        "description" : "description1"
      };
    console.log($scope.aCourse["name"]);  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div class="page-section padding-top-none" ng-repeat="(key, value) in aCourse" >
              <div class="media-body" >
                <h1 class="text-display-1 margin-none" >{{value}}</h1>
              </div>
          </div>
</div>

【讨论】：

【解决方案3】：

在您的角度代码中，您将 aCourse 设置为响应数据。然后，您可以通过以下方式将数据作为对象访问：

$scope.aCourse["name"]

然后在您的 html 中，您正在 $scope.aCourse 上运行 ng-repeat，就好像它是一个对象数组一样：

<div class="page-section padding-top-none" ng-repeat="c in aCourse" >

您需要将 aCourse 设为对象数组以使用当前的 html，或者更新您的 html 并使用 aCourse.name 和 aCourse.description 访问 aCourse 中的对象。

【讨论】：

为什么这被否决了？似乎是正确的答案
谁能告诉我为什么他们投了反对票？据我所知，我提供了准确的信息和问题的解决方案。