Accessing a JSON file stored locally using JavaScript

Question

Accessing a JSON file stored locally using JavaScript

I am trying to access a .json file from my localhost, but I am encountering some issues!

The contents of this file are shown below:

[
 {"source":"tw1", 
  "text":"fubar"}, 

 {"source":"tw2", 
  "text":"foo"}
]

To set up my localhost, I used the command: python -m http.server 8888 &, which you can find more information about in the D3.js documentation.

Below is the javascript code that I have written:

<script type="text/javascript" src="lib/jquery-1.9.1.js"></script>
   <script>
    $(document).ready(
        $.getJSON("http://localhost/test.json", function(data){
            document.write(data);

    });
    </script>

javascript json localhost

Answer 1

Answer №1

If you decide to open your server on port 8888, remember that you need to request it on that specific port:

$.getJSON("http://localhost:8888/test.json", function(data){

It's important to note that the server must have the appropriate CORS headers set in order to bypass any cross-domain restrictions. You can learn more about this from this resource.

Another issue seems to be a compilation error in your code, indicated by the missing });. The indentation inconsistency highlights this problem:

$(document).ready(
    $.getJSON("http://localhost:8888/test.json", function(data){
        document.write(data);
    }); // <=== was missing
});

In addition, using document.write after the page loads is not recommended. Instead, consider utilizing DOM manipulation methods such as

$(document.body).append($('<pre>'+data+'</pre>'));

Answer 2

If you decide to open your server on port 8888, remember that you need to request it on that specific port:

$.getJSON("http://localhost:8888/test.json", function(data){

It's important to note that the server must have the appropriate CORS headers set in order to bypass any cross-domain restrictions. You can learn more about this from this resource.

Another issue seems to be a compilation error in your code, indicated by the missing });. The indentation inconsistency highlights this problem:

$(document).ready(
    $.getJSON("http://localhost:8888/test.json", function(data){
        document.write(data);
    }); // <=== was missing
});

In addition, using document.write after the page loads is not recommended. Instead, consider utilizing DOM manipulation methods such as

$(document.body).append($('<pre>'+data+'</pre>'));

Answer 3

Answer №2

It appears the issue lies in your attempt to retrieve the json file from your local computer. To resolve this, consider uploading your json file to an online server and accessing it from there rather than relying on the one stored on your computer.

Answer 4

It appears the issue lies in your attempt to retrieve the json file from your local computer. To resolve this, consider uploading your json file to an online server and accessing it from there rather than relying on the one stored on your computer.

Accessing a JSON file stored locally using JavaScript

Answer №1

Answer №2

Similar questions

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

Start a Draft.js Editor that includes an unordered list feature

Using HTML and CSS to create a Contact Form

Utilizing Query Data Source in ASP.NET MVC for Enhanced JQuery DataTables Experience

Tips for accessing the following element within an array using a for loop with the syntax for (let obj of objects)

Guide on transferring binary image data to a JavaScript function

Encountering Type Error in React Native when making HTTPS request with JSON body on Android: Network request failure

filtering the properties of mongoose documents

An effective method for appending data to a multidimensional array in Google script

What is the process for managing cookies on the server side using Node.js?

Is there a YUI Custom Event available for pre-selecting the value in a Dropdown

An effective way to determine the size of a browser through javascript

What is the best way to transfer Flow type properties from one React component to another?

Selecting a pair of radio buttons to toggle the visibility of different div elements using JavaScript

This error message 'React Native _this2.refs.myinput.focus is not a function' indicates that

Displaying multiple images on the face of a cylinder using three.js

Strategies for modifying state in reactjs

AJAX successfully completes, but no response is received

Experiencing difficulties while attempting to authenticate gcloud using a json file

Having trouble getting @vercel/ncc to work, keeps throwing a "Module not found" error