How come I am unable to access a local JSON file using AngularJS $http?

I've been attempting to load a local file (todo.json) located in the same directory as my webpage using the following line of code:

$http.get("todo.json").success( function( data ){ //Do Some logic});

However, when I try to do so, I encounter the following error message in the Javascript console:

Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/quickCoder/Desktop/HTML5Apps/todo.json'.
...

Just to clarify, the index.html file with this code is in the same directory as todo.json under the HTML5Apps folder. Any suggestions on how to resolve this issue?

javascriptjsonangularjsweb-applications

Answer №1

In order for your files to be served, you will need a running webserver with the JSON file located within your server's folder.

An easy solution is to use a web server like node-serve. Once installed, simply type serve in your terminal to start the server.

[...] Keep in mind that when accessing a local file, the protocol used is not http:// but file://. Due to this, direct AJAX requests from local files are not possible. This limitation also applies to many other JavaScript APIs, which can only be accessed through the HTTP protocol. This restriction is part of the Web's security model, a topic we will delve into further in a separate article.

Quote source: mdn

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

Tips for utilizing the loadDataWithBaseURL() method to load CSS and JS files directly from an SDCARD

I am facing an issue with loading files from SDCARD onto a webview. The .html, .js, .css files are stored on the SDCARD in my scenario, and the html file content is encrypted. The steps I follow to load the html file are: Read file content Decrypt all co ...

javascriptandroidandroid-webviewandroid-sdcard

A helpful guide on passing a component as a prop to a child class and incorporating it within the child component along with additional props

Within my parent class, I have loaded a child class component and passed another component to it as a prop. In the childclass component, I am trying to display that component. <EditRecordModal show={this.state.showEditModal} onHide={this.handle ...

javascriptreactjs

Website search bar - easily find what you're looking for

I've tested this code and it works well on the basintap page. However, I'm interested to find out how I can search for something when I'm on a different page instead? <?php $query = $_GET['query']; $min_length = 2; if(strlen($ ...

javascriptphpmysqlangularjsajax

What is the best way to assign new values to properties within a JSON object array?

After retrieving record sets from an express server using the node mssql package, I was able to obtain an array of JSON objects as expected. Now, my task is to update the value of the Email property in each JSON object. My initial approach involved loopin ...

arraysjsonexpress

Iterate through a directory on the local machine and generate elements dynamically

I am looking to create a jQuery-UI tabs menu that includes 54 images on each tab. I have a total of 880 images stored in a folder, and it would be very time-consuming to manually insert an <img> tag for each one. Is there a way to dynamically cycle t ...

javascriptjqueryhtmlcssdirectory

Allow users to select options after they click a radio button

I have a pair of radio buttons and two sets of select options within different classes. Upon selecting the first radio button, the select options belonging to class1 should be enabled. On the other hand, upon selecting the second radio button, the select ...

javascripthtml

Create a visual representation of an item within a framework using an Angular directive

I am interested in using a directive to draw a triangle above a series of div elements. In my scenario, I have four squares and two values: charge and normal. The value of charge determines the color of the squares, while normal is used for drawing the t ...

javascripthtmlangularangular-materialangular-directive

Securely encoding information with PHP and decrypting it using JavaScript

I'm currently working with 2 servers. My goal is to generate a pair of keys, store the private key in local storage, and send the public key to my PHP server. The main objective is to encrypt data using the public key in PHP and decrypt it using Jav ...

javascriptphpnode.jsrsapublic-key-encryption

In ui-router, the resolve value is defined for AngularJS but ends up being undefined in the controller

I am encountering an issue in my route where I am returning a value that is defined when I console.log it, but it shows as undefined in the controller. As a newcomer to Angular and Ionic, I'm seeking guidance on resolving this problem. Route .state( ...

angularjsangular-ui-routerionic-framework

Utilizing JavaScript for parallax horizontal scrolling (identifying optimal 50% of screen)

I have successfully implemented this code for vertical scrolling: $('.flapleftclass').css('top',(0+(scrolled*0.5))+'px'); This method works well because I am referencing to the top position. However, when it comes to horizon ...

javascripthtmlcsswebparallax

Prevent multiple instances of Home screen app on iOS with PWA

There seems to be an issue with the PWA app not functioning properly on iOS devices. Unlike Android, where adding an app to your homescreen will prompt a message saying it's already installed, iOS allows users to add the app multiple times which is no ...

javascriptangularjsasp.net-mvcpolymer-1.0progressive-web-apps

Incorporating the chosen value from a dropdown box as a variable in PHP

Seeking assistance with using the value selected in a drop-down box as a PHP variable in my functions.php file. I attempted to utilize jquery-ajax for this purpose. $(document).ready(function(){ $("#pa_color").change(function(){ var result= $(this).val( ...

javascriptphpjqueryhtmlajax

WebSocket connection issues are being experienced by certain users

While using socket.io, I encountered an issue where some users were unable to send messages with the message "I can't send a message why?". After researching the problem, it seems that the firewall or antivirus software may be blocking websockets. If ...

javascriptnode.jswebsocketsocket.io

The ng-cloak directive doesn't seem to be functioning properly

After writing some code to remove '#' tags from text input, I encountered an issue upon loading the page. The initial display showed '{{textWithHashes | textWithoutDashes}}', which is not appealing at all. I attempted to use ng-cloak to ...

javascriptangularjs

What is the method for retrieving an array or object that contains a collection of files designated for uploading within the jQuery file upload plugin?

Currently, I have successfully integrated a form into my Rails site and set up the jQuery file upload plugin. The upload form functions properly with the ability to select multiple files and utilize all ajax upload features. However, a challenge I am faci ...

javascriptjqueryajaxformsfile-upload

Invoking functions from controllers to mongoose schema module in Node.js

Greetings everyone, I am fairly new to working with Node.js so let me share my current dilemma. I have set up a mongoose schema for handling comments in the following structure: const mongoose = require("mongoose"); const Schema = mongoose.Schema; const ...

javascriptnode.jsexpressmongoose

What could be the reason behind the failure of $cookieStore.get() in retrieving the value?

I am currently testing the cookie functionality in AngularJS. I'm encountering an issue where the console is returning 'undefined' when trying to retrieve a saved value from the cookie using $cookieStore.put(). It seems to work fine when set ...

javascriptangularjs

Tap and hold with Zepto

I've been on the hunt for a Zepto plugin that can handle a longClick event. While Zepto already supports longTap, which is perfect for mobile devices, I need something specifically for desktop browsers when a user clicks and holds. It's also impo ...

javascriptjqueryzepto

Steps to create a toggle click event

I've been attempting to create a toggle click event using the code below: HTML <a class="load" data-gallery="123456" style="cursor: pointer;"><h2><p>example</p></h2></a> <div id="123456"> </div> j ...

javascriptjquery

Having trouble retrieving a variable by POST in the backend through AJAX, yet it works perfectly fine in the frontend

Hey there! I'm facing an issue that I'm hoping someone can help me with. I'm attempting to send a tag attribute, stored in a JavaScript variable, to the backend (PHP) via AJAX. $.ajax({ type: "POST", url: '/requests/mercury.php ...

javascriptphpjqueryajaxcurl