javascript - 在 ng-table 上使用 $http GET 加载的 JSON 数据未显示

Question

我最近开始使用 angularjs，并尝试使用 ng-table 来显示爆炸搜索的结果。

直接在 js 脚本中添加 JSON 数据一切正常。不幸的是，我无法使用 $http 成功加载本地 JSON 文件

我已经搜索过类似的问题，但没有找到解决方案。

特别是从 Firefox 中的调试器获取此错误:

"Error: Access to restricted URI denied

后面是 AngularJS 库的路径...

下面是代码:

JS:

      var app = angular.module("main", ["ngTable", 'ngTableResizableColumns']);

  app.controller("DemoCtrl", ['$scope', '$filter', '$timeout', '$http', 'NgTableParams',  function($scope, $filter, $timeout, $http, NgTableParams){

    var data = [ ];

    $http.get('/cw2144_ecoli.json')
    .success(function(data, status, $scope) {

      $scope.tableParams = new NgTableParams({
          page: 1,            // show first page
          count: 10,          // count per page
          sorting: {
              blast_evalue: 'asc'    // initial sorting
          }
      }, {
          total: data.length, // length of data
          getData: function($defer, params) {
              // use built-in angular filter
              var filteredData = params.filter() ?
                      $filter('filter')(data, params.filter()) :
                      data;
              var orderedData = params.sorting() ?
                      $filter('orderBy')(filteredData, params.orderBy()) :
                      data;

              params.total(orderedData.length); // set total for recalc pagination
              $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
          }
      });

    });
  }]);

HTML:

<button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
<button ng-click="tableParams.filter({})" class="btn btn-default pull-right">Clear filter</button>
<p><strong>Sorting:</strong> {{tableParams.sorting()|json}}
<p><strong>Filter:</strong> {{tableParams.filter()|json}}

<table ng-table="tableParams" show-filter="true" class="table ng-table-resizable-columns table-bordered table-striped">
    <tr ng-repeat="user in $data">
        <td data-title="'Query'" sortable="'query_hdr'" filter="{ 'query_hdr': 'text' }">
            {{user.query_hdr}}
        </td>
        <td data-title="'Query Length'" sortable="'query_len'" filter="{ 'query_len': 'text' }">
            {{user.query_len}}
        </td>

    </tr>
</table>

JSON:

[
    {
        "query_hdr": "Contig1013__1",
        "query_len": 54,
        "ncbi_bp_name": "Escherichia coli O127:H6 str. E2348/69",
        "fam_seq_func": "propanediol dehydratase, large subunit, AdoCbl-dependent",
        "fam_seq_prot_id": "CAS09680.1",
        "blast_pct_id": 71.7,
        "blast_score": 86.7,
        "blast_evalue": 1e-21,
        "ncbi_tax": 574521,
        "fam_id": 1001,
        "fam_pathogenicity": "yes",
        "fam_prob": 0.9991,
        "fam_seq_aln_cov_pct": 9.94
    },
    {
        "query_hdr": "Contig1026__1",
        "query_len": 55,
        "ncbi_bp_name": "Escherichia coli O104:H4 str. 2011C-3493",
        "fam_seq_func": "putative mercuric reductase",
        "fam_seq_prot_id": "AFS72021.1",
        "blast_pct_id": 100,
        "blast_score": 111,
        "blast_evalue": 2e-30,
        "ncbi_tax": 1133852,
        "fam_id": 954,
        "fam_pathogenicity": "yes",
        "fam_prob": 0.9391,
        "fam_seq_aln_cov_pct": 9.75
    }
]

这个看似简单的想法确实困扰着我，如果你能解决它，我会很开心

Answer 1

我也遇到过类似的问题，结果发现这是一个 IIS 问题。我必须将以下代码片段添加到 web.config 文件中:

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
</system.webServer>

如果您使用的是 IIS，这可能会有所帮助。