Question

我花了几个小时才完成这项工作，而我却无法在网页上显示数据。我没有得到任何错误＆amp;我能够在控制台工具箱中看到检索到的数据。这是我的代码 -

在html页面中 -

<div class="row">
    <div class="col-md-8">
        <ul>
            <li ng-repeat="menuContent in profileMenu">
                <a href="profileMenu/{{menuContent.menuId}}">
                    {{menuContent.menuItem}}
                </a>
            </li>
        </ul>
    </div>
</div>

在.json文件中 -

[{
    "menuId":"1",
    "menuItem":"About"
},{
    "menuId":"2",   
    "menuItem":"Timeline"
},{
    "menuId":"3",
    "menuItem":"Teams"
},{
    "menuId":"4",   
    "menuItem":"Liked Profiles"
}]

在JS文件中 -

$http({
    method: "get",
    url: "data/custom-menu.json"
}).then(function(profileMenuContent){
    $scope.profileMenu = profileMenuContent;
    console.log($scope.profileMenu.data);
});

Answer 1

这是工作代码 -

＆＃13;

'use strict';
 var app = angular.module("demo", [], function($httpProvider) {

});

app.controller("demoCtrl", function($scope) {
  $scope.profileMenu = [{
    "menuId":"1",
    "menuItem":"About"
},{
    "menuId":"2",   
    "menuItem":"Timeline"
},{
    "menuId":"3",
    "menuItem":"Teams"
},{
    "menuId":"4",   
    "menuItem":"Liked Profiles"
}];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="demo">
  <div ng-controller="demoCtrl">
           <ul>
              <li ng-repeat="menuContent in profileMenu">
                    <a href="profileMenu/{{menuContent.menuId}}">
                        {{menuContent.menuItem}}
                    </a>
              </li>
          </ul>
  </div>
</body>

＆＃13;

Answer 2

目前，您在HTML

中错误key

使用menuContent.menuId代替menuContent.id并使用menuContent.menuItem代替menuContent.name。

这会有效！

Answer 3

使用以下代码：

$http({
       method: "get",
       url: "data/custom-menu.json"
}).then(function(profileMenuContent){
      $scope.profileMenu = profileMenuContent.data;
      console.log($scope.profileMenu);
});

您在服务中使用承诺，因此它会在profileMenuContent.data中返回您的数据。

Answer 4

谢谢你们的同意！我现在能够查看json数据。该错误在.js文件中。由于我使用promise来调用数据，我应该使用'.data'将数据输入$ scope变量。这是最终的代码 -

在HTML文件中：

<div class="row">
 <div class="col-md-8">
    <ul>
        <li ng-repeat="menuContent in profileMenu">
            <a href="profileMenu/{{menuContent.menuId}}">
                {{menuContent.menuItem}}
            </a>
        </li>
    </ul>
</div>

在Json：

[{
"menuId":"1",
"menuItem":"About"
 },{
"menuId":"2",   
"menuItem":"Timeline"
 },{
"menuId":"3",
"menuItem":"Teams"
 },{
"menuId":"4",   
"menuItem":"Liked Profiles"
 }]

在js文件中 -

$http({
method: "get",
url: "data/custom-menu.json"
}).then(function(profileMenuContent){
$scope.profileMenu = profileMenuContent.data;
console.log($scope.profileMenu.data);
});

AngularJS未在列表视图中显示JSON数据

4 个答案: