Encountered a loading error while attempting to retrieve a JSON file from the GitHub repository

While delving into learning JSON and AJAX, I encountered a challenge when trying to load a simple JSON file from a repository on GitHub.

To set up a local server, I am utilizing browser sync along with the following code snippet:

var request = new XMLHttpRequest();
request.open(
    "GET",
    "https://github.com/d-ivashchuk/misc/blob/master/ancestry.json",
    false
);
request.onload = function() {
    var data = JSON.parse(request.responseText);
    console.log(data[3]);
};
request.send();

The issue arises as follows:

Failed to load. No 'Access-Control-Allow-Origin' header is present on the resource.

Although I have successfully downloaded some JSON files from GitHub previously, I am still keen on finding a solution to this particular problem.

Answer №1

To successfully retrieve the data from your file, make sure to utilize the raw version and implement a small adjustment for it to function correctly:

  var request = new XMLHttpRequest();
  request.open(
  "GET",
  //Use the correct URL
  "https://raw.githubusercontent.com/d-ivashchuk/misc/master/ancestry.json",
  false
  );
  request.onload = function() {
  var data = JSON.parse(request.responseText);
  console.log(data[3]);
  };
  request.send();

To test the functionality, you can check out this JSFiddle demo

In regards to your query about using this solution with sources other than git, unfortunately, it is not suitable...however, you can apply this method with any source that supports CORS. For example, if you examine the headers of

https://raw.githubusercontent.com/d-ivashchuk/misc/master/ancestry.json
, you will notice the presence of the following header: Access-Control-Allow-Origin:*

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

JavaScript object merging (let's coin a term)

Is it possible to natively transform an object in JavaScript? { sample:{ name:"joe", age:69 } } into { 'sample.name': 'joe', 'sample.age': 69 } I have tried the following method, and it appears to wor ...

Execute a task when the offset value is lower than a specified threshold in the waypoints

Is it possible to toggle a navbar class based on the body offset being less than -20px using the Waypoints plugin? The current code is not working because the offset values are undefined. How can I retrieve the body offset value using Waypoints? $("body ...

Automatically save using Jquery when there is a change in the input

Within my CMS (Wordpress) platform, I am implementing a colorpicker. <tr valign="top"> <th scope="row"><?php esc_html_e('Border Color', 'webthesign'); ?></th> <td valign="middle"> <input typ ...

When downloading Facebook API data as a JSON Object and importing it into Google Sheets, there is an issue with the Dates values

Objective: To seamlessly import client data from Facebook Graph API into a Google Sheet in order to build an interactive Facebook Ads Dashboard Methods Attempted: Installed a Google Sheet script with an ImportJSON function designed to import JSON feeds ...

Make sure the div is always positioned above everything, including any built-in pop-up windows

When working with two forms, one for user input and the other as a pop-up window to display results, users sometimes close the pop-up window prematurely if they think there is a network issue causing a delay in data execution. To prevent this, I am consi ...

Retrieve the Checkbox id of a material-ui checkbox by accessing the object

I'm currently working on extracting the id of a Checkbox object in my JSX code. Here's how I've set it up: <div style={{display: 'inline-block', }}><Checkbox id='q1' onclick={toggleField(this)}/></div> ...

Building a static support button within Laravel

I am looking to add a fixed button to my homepage that, when clicked, will open a support page above the button. I have seen examples of this on various websites, but I am struggling to implement them due to complex embedded codes and JavaScript. Can you ...

Utilize PowerShell to substitute text with different content

I am currently working with a series of folders that contain various json files. My goal is to create a powershell script that can modify the following line for all the json files within the folder: "objectStatus": "ACTIVE", It's ...

JavaScript regex problem

As I am handling a specific string: £1,134.00 (£1,360.80 inc VAT) I am currently attempting to isolate the numerical values as follows: ['1,134.00','1,360.80'] My approach involves utilizing this regex pattern in Javascript: /&bs ...

Using Angular's UI Typeahead feature in conjunction with the `$http.get`

Seeking assistance with retrieving data from a local server using JSON (not JSONP) and presenting it in a typeahead via Angular UI bootstrap and Angular. Successfully implemented timeout() and jsonp based on examples found, confirming that promises are fun ...

Improving performance of a lengthy select query to generate JSON output in a Rails application

Trying to efficiently retrieve and format a significant amount of data from various database tables into nested JSON for quick output on the browser has been a top priority. Experimenting with different methods to streamline this process, I've experim ...

I'm struggling to make the jquery parentsUntil function work properly

Would appreciate some help with using the jquery parentsUntil method to hide a button until a radio box is selected. I've been struggling with this for a few days now and can't seem to figure out what I'm doing wrong. Any insights would be g ...

Use Cypress to retrieve a token from an API, store it in local storage, and then use it in the header of another API request. Once the token is successfully incorporated, capture and return the

There is an API (referred to as getToken) that generates a token in its response body. This token is then called and stored in the header of another API (known as returnBody). It seems logical to utilize localStorage for the getToken API since the token ca ...

React.js - state variable becomes undefined upon uploading app to Amplify

I am encountering a perplexing error and am struggling to determine the root cause. To provide a brief overview, I have a dialog containing a jsonschema form along with an image that is uploaded to an input and saved in b64 format within a state variable c ...

Using Material-UI's <Autocomplete/> component and the getOptionLabel prop to handle an empty string value

Currently, I am working with material-ui autocomplete and passing an array of states to its options property. However, I have encountered an issue with the getOptionLabel method: Material-UI: The `getOptionLabel` method of Autocomplete returned undefined ...

Encountering the error message "Attempting to open an unclosed connection" when invoking a function from a child process in Node.js

I keep encountering the issue of "Error: Trying to open unclosed connection," even though I don't think it's related to a database problem. This has me puzzled because most fixes for this error point towards database connection troubles. My obje ...

Parsing JSON data with a timestamp that does not conform to the RFC 3339 format

In Go, dealing with deserialization of time formats other than RFC 3339 can be a challenge. The encoding/json package limits us to only accepting data in RFC 3339 format. One workaround is deserializing into a string, converting it to RFC 3339, and then ...

Issue with Ionic 4 button not triggering event when created using Jquery

Utilizing Ionic 4 in my current project, I have integrated it with Jquery. On the HTML page, a button is created using the following code: <ion-button (click)="event1()">EVENT1 </ion-button> In the .ts file for the page, a function is impleme ...

AngularJS ng-view is a directive that views the application

I am currently struggling to create an angular js menu. I have been working on my code, but the pages are not loading as expected. Do you think I missed something or did I forget to include all the necessary scripts? I am fairly new to angular and could us ...

Transitioning menus in Ionic 2

I followed the instructions in the Ionic 2 menu documentation and tried to display the menu in a specific way: https://i.sstatic.net/zzm8f.png My intention was to have the menu displayed below the content page while keeping the menu button visible. Howe ...