Trouble displaying loaded JSON data with $http GET in ng-table

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!

Answer №1

I encountered a similar issue and discovered that it was related to an IIS problem. To resolve it, I needed to include the following code snippet in the web.config file:

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

If you are utilizing IIS, implementing this change might solve your problem.

Answer №2

Solving the issue was quite straightforward... All I needed to do was ensure that the json file (or whichever file I needed access to) was stored within the same directory as the index.html (or main html file). Due to security measures, most browsers restrict access to local files located outside of this directory tree.

Appreciation to everyone for their valuable suggestions and assistance

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can I use more than one AudioContext at a time?

In my project, I am developing a React App using MeteorJS that utilizes the Web Audio API. This app consists of multiple pages, each of which utilizes web audio functionality. The issue I am facing is that I have hit the limit of 6 audio contexts allowed i ...

What is the best way to categorize a collection of objects within a string based on their distinct properties?

I am working with an array of hundreds of objects in JavaScript, each object follows this structure : object1 = { objectClass : Car, parentClass : Vehicle, name : BMW } object2 = { objectClass : Bicycle, parentClass : Vehicle, name : Giant } object3 = { ob ...

Exploring the power of searching JSON data using ReactJS

After reading through the "Thinking in React" blog, I'm inspired to create something similar. Instead of filtering an array table, I want it to display the row that matches the input value. I have attempted this and created a jsfiddle example here: j ...

What is the best way to convert an array of data into a dataset format in React Native?

Within my specific use case, I am seeking to reform the array structure prior to loading it into a line chart. In this context, the props received are as follows: const data = [26.727, 26.952, 12.132, 25.933, 12.151, 28.492, 12.134, 26.191] The objective ...

Using the `find()` method in a loop of Mongoose iterate

Searching for documents based on conditions stored in an array can be quite useful. Take this example: subscriptions=[ {teacher: 'john', student:'david' ,course:'math'}, {teacher: 'john', student:'david' , ...

A recursive function enhanced with a timeout mechanism to avoid exceeding the stack call limit

Trying to search for images on any object of various depths using a recursive function can lead to a Maximum call stack size exceeded error in certain cases. A suggested solution here involves wrapping the recursive function in a setTimeout, but this seems ...

What methods can I use to minimize the frequency of the blue box appearing around text?

I successfully developed code that enables user interaction with text, triggering the opening of a modal box when clicked. In this modal box, the text turns red upon clicking, indicating activation of a checkbox. However, I notice that every time I intera ...

Issue encountered when attempting to push jQuery AJAX requests into an array

I'm attempting to store ajax requests in an array called deferreds. However, I'm consistently encountering the error message below: Uncaught SyntaxError: missing ) after argument list As a reference, I've been using this guide: Pass in an ...

Updating the organization of the models directory in Loopback

I am looking to update the structure of the models folder. As per the documentation, I can make changes to the json config file which is typically set up like this: { "_meta": { "sources": [ "loopback/common/models/**/*", "loopback/serve ...

Error encountered: No geographic indices found for executing a geoNear operation with Mongoose

Initially, I had divided the schemas but later nested them inside my overall document. Despite adding indexes and removing coordinates from location, there seems to be an issue with the nested points. Upon running get Indexes, it shows that there is an i ...

Tips for arranging div elements in a grid-like matrix layout

I am facing a challenge in arranging multiple rectangular divs into a grid structure with 10 columns and 10 rows. The CSS styles for the top, bottom, left, or right positions must be in percentages to accommodate zoom in and out functionality without overl ...

Step-by-step guide on dynamically fetching additional images from a directory using php, jquery, and ajax

I have a scenario where I have multiple folders, each containing up to 20 images. On my HTML page, I want to display the first 5 images and provide a "click to view more" option to show the remaining 15 images when clicked. Currently, the issue I am facin ...

Can a JavaScript file be imported exclusively for a Vue component?

When attempting to utilize the table component in the vue-ant framework, I am facing an issue. I am only looking to import the table style, but when I try to import the table style using import 'ant-design-vue/lib/table/style/css', it affects all ...

Elevate with Ease: Tailwind's Height Transition

I've been attempting to implement a transition effect using TailwindCSS, but I haven't found an updated version with the latest features. Here's the code snippet: <div id="fadeInElement" className={visible ? " w-2/3 px-5 t ...

AngularJS simplifies request handling by allowing currying of requests

I am working with three forms within the same container, each triggered by a specific objectId. I want to create a function that can handle all actions related to these objectIds. Unfortunately, I am restricted to using ES5. var applyActions = function( ...

Having Trouble with Shopify's Asynchronous Ajax Add to Cart Feature?

I have developed a unique Shopify page design that allows users to add multiple items to their cart using Shopify's Ajax API. I've created a test version of the page for demonstration: Below is the current javascript code I am using to enable as ...

Retrieve the ngModel's current value

One of the challenges I encountered is with a textarea and checkbox interaction. Specifically, once the checkbox is checked, I aim to have the value appear in the textarea. <div class="message-container"> <textarea *ngIf="mode === 1" ...

Using Vue.js to make an AJAX request to an API that returns a list in JSON format

I am attempting to utilize an AJAX call with the free API located at that returns a list in JSON format. My goal is to display the result on my HTML using Vue.js, but unfortunately, it doesn't seem to work as expected. This is my JavaScript code: va ...

The error states that the type '() => string | JSX.Element' cannot be assigned to the type 'FC<{}>'

Can someone help me with this error I'm encountering? I am fairly new to typescript, so I assume it has something to do with that. Below is the code snippet in question: Any guidance would be greatly appreciated. const Pizzas: React.FC = () => { ...

Organize array elements based on their values - using javascript

I am currently exploring the most effective approach to divide an array into multiple arrays based on specific operations performed on the values within the array. Imagine I have an array like this: var arr = [100, 200, 300, 500, 600, 700, 1000, 1100, 12 ...