I have recently delved into learning angularjs and am currently experimenting with using ng-table to display the results of blast searches.
Everything runs smoothly when I directly add the JSON data in the JavaScript script. However, I have been unsuccessful in loading a local JSON file using $http.
I have encountered similar issues while searching for solutions but have not found a fix yet.
Specifically, I am receiving this error from the debugger in Firefox:
"Error: Access to restricted URI denied
followed by paths to AngularJS libraries...
Here is the code snippet:
JavaScript:
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
}
]
This seemingly simple issue is really frustrating me. It would truly make my day if you could help me solve it!