Having trouble retrieving information from an external local json file

Question

Having trouble retrieving information from an external local json file

I'm attempting to display an 'alert' box containing text retrieved from a JSON file. However, I'm facing issues in fetching data from the JSON file and the alert box is not being displayed.

var thebook = JSON.parse(book);

function showAlert() {
  alert(thebook[0].word);
}

<head>
  <script type="text/javascript" src="book.json"></script>
</head>

<body>
  <button onclick="showAlert()">show alert</button>
</body>

Here goes an illustration JSON file

[
  {
    "word" : "cuiller",
    "page" : 23
  },
  
  {
    "word" : "arbre ",
    "page" : 245
  }
]

javascript json

Answer 1

Answer №1

To set up your JSON in book.json, store it in a variable (e.g. var book as shown below).

var book = [
  {
    "word" : "cuiller",
    "page" : 23
  },

  {
    "word" : "arbre ",
    "page" : 245
  }
];

Make sure to stringify it before parsing or alerting it.

thebook = JSON.parse(JSON.stringify(book));

function showAlert() {
  alert(thebook[0].word);
}

Check out the JSFiddle link for a working example: https://jsfiddle.net/h5knqobs/9/

I hope this explanation is helpful!

Answer 2

To set up your JSON in book.json, store it in a variable (e.g. var book as shown below).

var book = [
  {
    "word" : "cuiller",
    "page" : 23
  },

  {
    "word" : "arbre ",
    "page" : 245
  }
];

Make sure to stringify it before parsing or alerting it.

thebook = JSON.parse(JSON.stringify(book));

function showAlert() {
  alert(thebook[0].word);
}

Check out the JSFiddle link for a working example: https://jsfiddle.net/h5knqobs/9/

I hope this explanation is helpful!

Answer 3

Answer №2

To access the resource in your JavaScript code, you must make a request for it rather than just referencing it. One way to do this is by using an XMLHttpRequest, which will retrieve the text from the file. You can then convert this text into an object by using JSON.parse.

An example implementation would be as follows:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj.name;
  }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

For more information on JSON parsing in JavaScript, visit: https://www.w3schools.com/js/js_json_parse.asp

Answer 4

To access the resource in your JavaScript code, you must make a request for it rather than just referencing it. One way to do this is by using an XMLHttpRequest, which will retrieve the text from the file. You can then convert this text into an object by using JSON.parse.

An example implementation would be as follows:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj.name;
  }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

For more information on JSON parsing in JavaScript, visit: https://www.w3schools.com/js/js_json_parse.asp

Answer 5

Answer №3

Learn how to access JSON data from a file

var bookData = (function() {
    var json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': "/book.json",
        'dataType': "json",
        'success': function (data) {
            json = data;
        }
    });
    return json;
})();

Once you have the JSON value stored in a variable, parse it as shown below.

var theBook = JSON.parse(JSON.stringify(bookData));

UPDATE

Here is a revised version of the method

var bookData = null;
$.ajax({
    'async': false,
    'global': false,
    'url': "/test.json",
    'dataType': "json",
    'success': function (data) {
        bookData = data;
    }
});

In your showAlert function, you can simply use bookData[0].word.

Answer 6

Learn how to access JSON data from a file

var bookData = (function() {
    var json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': "/book.json",
        'dataType': "json",
        'success': function (data) {
            json = data;
        }
    });
    return json;
})();

Once you have the JSON value stored in a variable, parse it as shown below.

var theBook = JSON.parse(JSON.stringify(bookData));

UPDATE

Here is a revised version of the method

var bookData = null;
$.ajax({
    'async': false,
    'global': false,
    'url': "/test.json",
    'dataType': "json",
    'success': function (data) {
        bookData = data;
    }
});

In your showAlert function, you can simply use bookData[0].word.

Having trouble retrieving information from an external local json file

Answer №1

Answer №2

Answer №3

Similar questions

Strategies for incorporating a JSON variable into the HttpClient query parameters in an Ionic 5 application

Dynamically fetching data with Node.js using Ajax requests

The useTransition() method in React remains stuck in the isPending state when making API calls from routes in the /pages/api directory

What's the best way to update the value of an angular field upon submission?

Tips for accessing an object on the server side in a servlet after it has been sent via retrofit with the @Body annotation

What is the best way to retrieve JSON format using ODATA?

Python Flask server struggling to find JavaScript and CSS files within index.html when paired with AngularJS frontend

How can I use jQuery to target elements other than the vertical scrollbar when

Obtaining the value for the last JSON object in onPostExecute()

Adjusting Javascript code to convert numerical values in HTML table cells from thousands to millions

Guidelines for securing login access where the "IsApproved" field must be true before authorization

Issue with parsing an empty array in a Discord bot built with Node.js

Issues with Angular ngroute: controllers are not functioning properly

My goal is to transfer information from the client-side to the server-side upon the user disconnecting from a socket.io connection using Node.js

Ways to evaluate two sentences based solely on the spacing in their dynamic sections

What is the best way to adjust the width of a textarea based on its content

What is the best way to use jQuery to toggle the visibility of a <panel>?

Multiple occurrences of trigger events were detected when loading ajax content

Alter the color as the text moves beneath a see-through layer

How can I reference MyClass.new as a method in Typescript?