如何从外部嵌套的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