Angular JS提取JSON数据

Angular JS extracting JSON data

本文关键字：数据 JSON 提取 JS Angular      更新时间：2023-09-26

我正在尝试学习Angular JS创建web应用程序。我已经在线阅读了Angular JS的phonecatApp教程，并试图调整它来存储一些关于base的信息

我现在有一个调用ngview指令的index.html文件。我把html页面分成了两个模板和两个各自的控制器。

我还使用自定义服务从JSON文件中获取信息，该文件包含我正在使用的数据。

这是我的代码"app.js"调用相应的页面和模板:

'use strict';
/* App Module */
var bracApp = angular.module('bracApp', [
  'ngRoute',
  'bracControllers',
  'bracServices',
  'myDropdown'
  /* creates above as dependencies of the application module */
]);
bracApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/base', {
        templateUrl: 'partials/brac-list.html',
        controller: 'bracListCtrl'
      }).
      when('/base/:baseId', {
        //* everything with ":" beforehand is extracted into the $routeParams object *//
        templateUrl: 'partials/brac-detail.html',
        controller: 'bracDetailCtrl'
      }).
      otherwise({
        redirectTo: '/base'
      });
  }]);

这是"controllers.js"文件:

'use strict';
/* Controllers */
var bracControllers = angular.module('bracControllers', [])
bracControllers.controller('bracListCtrl', ['$scope', 'Base', function($scope, Base) {
  $scope.bases = Base.query();
  $scope.orderProp = 'Bases';
}]);
bracControllers.controller('bracDetailCtrl', ['$scope', '$routeParams', 'Base', function($scope,
$routeParams, Base) {
  $scope.base = Base.get({baseId: $routeParams.baseId});
}]);

这是"services.js"文件，它应该从base . JSON中获取JSON信息:

'use strict';
/* Services - used to link data to application from JSON*/
var bracServices = angular.module('bracServices', ['ngResource']);
bracServices.factory('Base', ['$resource',
  function($resource) {
    return $resource('bases.json', {}, {
      query: {method: 'GET', params:{baseId:'Bases'}, isArray:true}
    });
  }]);

JSON文件有几个对象，它们只由两个属性组成:"Bases"answers"Information"。

编辑:

JSON数据格式如下:

[{"Bases":"Base Location 1","Information":"Minimal "},
{"Bases":"Base Location 2","Information":"Minimal "},
{"Bases":"Base Location 3","Information":"Minimal "},
{"Bases":"Base Location 4","Information":"Minimal "}]

我替换了碱基的位置，它们是包含字母，"，"answers"."的字符串。

我想做的是简单地显示"基地"属性的值在bracc -detail.html的下拉菜单中所选的基地(张贴在下面)。基本上，我试图从列表(JSON数据中的属性"Bases")中选择Base作为标头，所以像<h3>{{currentBase}}</h3>这样的东西。我不确定如何参考当前，从下拉菜单中选择的基础。有人能解释一下这是怎么做到的吗?谢谢，如果你需要我澄清什么，请告诉我。

下面是主页面的代码(工作) 
<div id="background">
  <div id="pagebackground">
<div id="table1">
  <div id="BracDropdown" class="btn-group" dropdown is-open="status.isopen">
    <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
      BRAC Bases <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li ng-repeat="base in bases | orderBy: orderProp">
        <a href="#/base/{{base.Bases}}">{{base.Bases}}</a>
      </li>
    </ul>
  </div>
  <div id="selector">
    <p id="sortby"> Sort by:</p>
    <select ng-model="orderProp">
      <option value="Bases">Name</option>
      <option value="Information">Information</option>
    </select>
  </div>
</div>

当我在Firefox中运行应用程序时，我得到以下错误:"格式不佳" - brac-list.html，第24行"语法错误"-碱基。Json，第1行

，当我从下拉菜单中单击菜单项时，我得到以下内容:"Error: [$resource:badcfg]资源配置错误。"预期的响应包含一个对象，但得到一个数组"

"

很好，我建议在从服务返回数据到任何控制器时使用承诺。例如:example

并将数组赋值给一个变量，该变量将在调用后从视图中访问。

相关文章：