如何從外部嵌套的json文件加載數據並打印值

Question

碼

嗨，我面臨着將json對象的結果顯示到我的視圖頁面的問題。 屏幕顯示為空，但我正在控制台中獲取數據。 使用ng重復時，它會顯示一些錯誤“ Repeater中的重復鍵”

對我的基本要求是從json文件中打印標題，當我單擊它時應顯示Title =“ example”

 var myItemsApp = angular.module('myItemsApp', []); myItemsApp.factory('itemsFactory', ['$http', function($http) { var itemsFactory = { itemDetails: function() { return $http({ url: "action.json", method: "GET", }) .then(function(response) { return response.data; }); } }; return itemsFactory; }]); myItemsApp.controller('NavController', ['$scope', 'itemsFactory', function($scope, itemsFactory) { var promise = itemsFactory.itemDetails(); promise.then(function(data) { $scope.itemDetails = data; console.log(data); }); $scope.select = function(item) { $scope.selected = item; } $scope.selected = {}; }]);

 <!DOCTYPE html> <html ng-app="myItemsApp"> <head> <meta charset="utf-8" /> <title>dynamic title</title> <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller=NavController> <h3>Load title dynamically</h3> <div class="row"> <div class="col-md-4"> <div class="panel panel-default"> <ul class="list-group"> <a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">{{item.title}}</a> </ul> </div> </div> <div class="col-md-8"> <div class="panel panel-default"> <h2>Title: {{selected.title}}</h2> </div> </div> </div> </div> </body> </html>

action.json

{

   "product": [{
         "title": "Product View",
         "path": "test1"

      },

      {
         "title": "Product Add",
         "path": "2"

      },
      {
         "title": "Product Update",
         "path": "test3"


      },

      {
         "title": "Product delete",
         "path": "test4"

      }
   ],

   "page": [{
      "title": "About us"
   }]

}

Answer 1

您應該有兩個嵌套的ng-repeat

  <div  ng-repeat="(key,item) in itemDetails">
      <a ng-repeat="i in item">
        {{i.title}}
      </a>
   </div>

演示

Answer 2

您的json具有產品和頁面作為鍵。 您的承諾將為您提供整個對象，您需要進行迭代並獲取產品對象，然后才能訪問標題。

如何從外部嵌套的json文件加載數據並打印值

問題描述

action.json

2 個解決方案

解決方案1
2 已采納 2017-05-26 05:17:09

解決方案2
0 2017-05-26 05:28:42

如何從外部嵌套的json文件加載數據並打印值

問題描述

action.json

2 個解決方案

解決方案1 2 已采納 2017-05-26 05:17:09

解決方案2 0 2017-05-26 05:28:42

解決方案1
2 已采納 2017-05-26 05:17:09

解決方案2
0 2017-05-26 05:28:42