The browser is unable to load the local JSON file due to an XMLHttpRequest error

I have been attempting to import a json file into a table, after conducting thorough research I finally discovered some solutions on how to achieve this.

However, when trying to implement it in Chrome, I encountered the following error:

XMLHttpRequest cannot load ... Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

I would appreciate any suggestions on how to prevent this error from occurring while loading my json data in Chrome.

<script type="text/javascript">
 $(function() {
 $.getJSON('./files.json')
   .success(function(data) {
     var tr;
     for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i][0] + "</td>");
        tr.append("<td>" + data[i][1] + "</td>");
        $('#table1').append(tr);
    }
})
.error(function(e) { console.error(e); })
});
</script>

Below is the HTML code where I am attempting to incorporate the data: Name Path

Answer №1

The error message clearly states:

Only certain protocol schemes are supported for cross-origin requests: http, data, chrome, chrome-extension, https, chrome-extension-resource.

It's important to note that using file URIs is not allowed according to the error message provided.

To resolve this issue, consider installing a web server and utilizing the http protocol instead.

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

What is the best practice for using templates in a constructor versus connectedCallback?

Should I apply template in the constructor or connectedCallback of a custom element? In my experience, when I apply it in connectedCallback, sometimes attributeChangedCallback is called before and I can't query for elements. export class TestElement ...

The function you are trying to execute in jQuery Mobile is not defined

I'm currently working on creating an external panel, but I've encountered some difficulties. Below is the HTML code: <html> <head> <title>My Page</title> <meta name="viewport" content="width=devi ...

Determining Cost Using Quantity and Option Changes in Angular 4

Task In the shopping cart, there is a list of items with options, quantities, and prices. The goal is to calculate the total price based on any changes in the quantity and option of an item. Investigation I included [(ngModel)] for 2-way data binding, ...

Removing invalid characters in a *ngFor loop eliminates any elements that do not meet the criteria

I am facing an issue with my *ngFor loop that is supposed to display a list of titles. fetchData = [{"title":"woman%20.gif"},{"title":"aman",},{"title":"jessica",},{"title":"rosh&quo ...

Exception in posting strings or JSON with react.js

Whenever a user clicks on the Signup button, the process I follow to create an account is as follows: Firstly, a new User entry is created in the database. createUser = () =>{ var xhr = new XMLHttpRequest(); xhr.open('POST', 'http:// ...

Exploring the global data subfolder in Eleventy / 11ty with iterative methods

I am working with Eleventy and have set up a subfolder called yummy in my global data folder. This subfolder contains the following files: \src\_data\yummy\drinks.json \src\_data\yummy\food.json When I use {{ yummy ...

Check the email for accuracy and show as needed

I need help verifying email validity in JavaScript and displaying an alert box if it's invalid. If the email is valid, I want to display div2 instead. However, my current code doesn't seem to be working as expected. Below is the JavaScript code ...

Invoke the forEach method within a lambda function and assign the output to a variable

In order to achieve my goal, I am looking for a way to take an array as input and save the result for future use. Unfortunately, I do not have permission to create additional functions. As a result, the code must accurately reflect what result should be. l ...

JavaScript - Modifying several object properties within an array of objects

I am attempting to update the values of multiple objects within an array of objects. // Using a for..of loop with variable i to access the second array and retrieve values const AntraegeListe = new Array(); for (let i = 0; i < MESRForm.MitarbeiterL ...

Unable to retrieve information from the secure https web interface

Encountered an error while running the main thread: Error message: javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to fin ...

Tips on effectively utilizing a value that has been modified by useEffect

Here is my current code: const issues = ['x','y','z']; let allIssueStatus; let selectedIssueStatus = ''; useEffect(() => { const fetchIssueStatus = async() => { const response = await fetch(&ap ...

What is causing this code to malfunction in AngularJS version 1.2?

Check out this code snippet I wrote using Angular 1.2: http://jsfiddle.net/VmkQy/1/ <div ng-app="app"> Title is: <span my-directive data-title="Test title">{{ title }}</span> </div> angular.module('app', []) .dir ...

Examining an Array of Objects Based on Various Attributes

Looking to find a way to check if a similar object already exists in an array of objects. Specifically, I want to know if there is an object with the same make and model properties (Ford Focus): { make: 'Ford', model: 'Focus', co ...

Interact with Circles Through Mouse Movements with d3.js Animation

I am currently utilizing the d3.js library and facing a challenge in meeting the client's requirements. The client has requested for "circles to turn black" and "follow" the mouse when hovered over. I am unsure if d3.js library supports such a featu ...

Transfer data from a child component to a parent component in a React application

Currently, I am working on my second React app. This time, I am experimenting with nested components, unlike my previous project which only had a single component. The main focus of this project is a calculator app built using React. To guide my design pro ...

Is there a way to determine if the browser window is currently in use?

The code I am currently working with looks like this: let focus; function setFocus() { focus = true; } function hideWindow() { focus = false; } window.onfocus = setFocus(); window.onblur = hideWindow(); The intention behind this code is to use it in the ...

What could be the reason why I am unable to choose my radio button? What error am I

The output can be found here... I am struggling to use a radio button and cannot seem to select it. Can someone please explain what issue I am facing? Any help would be greatly appreciated. const [value, setValue] = React.useState({ yes:"", no:"" ...

How to pass selected rows from Material-Table in React.js to another page

Is there a way to redirect to another page while passing selected row data as a prop? I am using material-table and I need to transfer the selected rows data to another page upon clicking the "Export" button, so that I can utilize the data in generating a ...

Validation in Laravel appears to be ineffective when managing schedules

I have a table that contains schedules for each subject. I want to ensure that every schedule is unique and not duplicated. The table includes columns for room, teacher, time, day, and checker who verifies the schedule. It's essential that there are n ...

Using openssl stream with node.js

I am facing an issue with my server running on TLS 1.0. Whenever I run the command below, it keeps giving me an endless stream of data on the terminal: ~$ openssl s_client -connect 'serveraddress':5000 The output is a real-time XML data stream ...