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

來源

2016-07-30 Naga Hemanth

你可以做一個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); 
});

來源

2016-08-03 10:36:15

這裏工作代碼 -

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

來源

2016-07-30 07:59:00

是的，我根據您的答案編輯了代碼。但仍然沒有顯示列表。 –

@NagaHemanth我已經更新了一個工作示例。（它不會從http請求獲取數據，但是您也可以在http請求中設置該變量。） –

現在，您可以在HTML

，而不是使用menuContent.id已經menuContent.menuId錯誤key和使用menuContent.menuItem代替menuContent.name。

這將工作！

來源

2016-07-30 08:11:00 varit05

我按照您的指令編輯了代碼。但問題仍然存在，不顯示列表。 –

你在'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返回數據。

來源

2016-08-03 04:16:12 rroxysam

謝謝rroxysam！它的工作。添加「.data」後，它工作正常。這背後的祕密是什麼？ –

原因是.then（）返回的對象也包含有關$ http請求的其他信息，實際的請求數據保存在數據屬性中。所以我們必須使用.data屬性來獲取我們的實際數據。您也可以通過安裝來自then/promise的響應來驗證它，這將返回一個對象。 – rroxysam

@Naga新興的stackoverflow開發者的跡象（複製，粘貼和賺取） – rroxysam

AngularJS沒有在列表視圖中顯示JSON數據

回答

相關問題