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

问题描述：

我已经花了几个小时在这个上，我只是无法让数据显示在页面上。我没有收到任何错误&我能够在控制台工具箱中看到检索到的数据。这里是我的代码 -AngularJS没有在列表视图中显示JSON数据

在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); 
});

你可以做一个plunker？你也有你的HTML中的ng-app和ng-controller吗？ – Srijith

在JSON内部，您将对象名称设置为“menuId”和“menuItem”。但在HTML中，您使用的是“id”和“name”。请更换并检查 – Thangadurai

是的Srijith！我在html文件中添加了ng-app＆ng-controller。剩余的代码工作正常。但问题只在于列表。 –

答

谢谢你的建议！我现在可以查看json数据。该错误在.js文件中。当我使用承诺来调用数据时，我应该使用'.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); 
});

答

这里工作代码 -

'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" 
 
}]; 
 
});

<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>

是的，我根据您的答案编辑了代码。但仍然没有显示列表。 –

@NagaHemanth我已经更新了一个工作示例。（它不会从http请求获取数据，但是您也可以在http请求中设置该变量。） –

答

现在，您可以在HTML

，而不是使用menuContent.id已经menuContent.menuId错误key和使用menuContent.menuItem代替menuContent.name。

这将工作！

我按照您的指令编辑了代码。但问题仍然存在，不显示列表。 –

你在'profileMenuContent'中获得了什么？ – varit05

我得到了像这样的json文件的全部数据 - “菜单ID”：“1”， “menuItem”：“关于”}，{“menuId”：“2”， “menuItem”：“Timeline “}，{”menuId“：”3“， ”menuItem“：”团队“}，{”menuId“：”4“， ”menuItem“：”喜欢的配置文件“} –

答

使用下面的代码：

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

您正在使用的承诺在您服务，所以它会在profileMenuContent.data返回数据。

谢谢rroxysam！它的工作。添加“.data”后，它工作正常。这背后的秘密是什么？ –

原因是.then（）返回的对象也包含有关$ http请求的其他信息，实际的请求数据保存在数据属性中。所以我们必须使用.data属性来获取我们的实际数据。您也可以通过安装来自then/promise的响应来验证它，这将返回一个对象。 – rroxysam

@Naga新兴的*开发者的迹象（复制，粘贴和赚取） – rroxysam

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

相关推荐