Accessing information from JSON files using AJAX

Question

Accessing information from JSON files using AJAX

I'm currently working on loading data from a JSON file using AJAX. The file I'm referencing is external-file.json. Within the code snippet provided, there are other unrelated sections. I'm encountering an issue within the getViaAjax function and I'm struggling to identify the error.

function flip(){
    if(vlib_front.style.transform){
        el.children[1].style.transform = "";
        el.children[0].style.transform = "";
    } else {
        el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
        el.children[0].style.transform = "perspective(600px) rotateY(0deg)";
    }
}
var vlib_front = document.getElementById('front');
var el = document.getElementById('flip3D');

el.addEventListener('click', flip);

var word = null; var explanation = null;

var i=0;

function updateDiv(id, content) {
    document.getElementById(id).innerHTML = content;
    document.getElementById(id).innerHTML = content;
}
updateDiv('the-h',word[i]);
updateDiv('the-p',explanation[i])

function counter (index, step){
    if (word[index+step] !== undefined) {
        index+=step;
        i=index;
        updateDiv('the-h',word[index]);
        updateDiv('the-p',explanation[index]);
    }      
}

var decos = document.getElementById('deco');
decos.addEventListener('click', function() {
    counter(i,-1);
}, false);
var incos = document.getElementById('inco');
incos.addEventListener('click', function() {
    counter(i,+1);
}, false);
function getViaAjax("external-file.json", callback) { // url being the url to external File holding the json
    var r = new XMLHttpRequest();
    r.open("GET", "external-file.json", true);
    r.onload = function() {
        if(this.status < 400 && this.status > 199) {

            if(typeof callback === "function")
                callback(JSON.parse(this.response));
        } else {
            console.log("err");// server reached but gave shitty status code}
        };
    }
    r.onerror = function(err) {console.log("error Ajax.get "+url);console.log(err);}

    r.send();
}

function yourLoadingFunction(jsonData) {
    word = jsonData.words;
    explanation = jsonData.explanation;
    updateDiv('the-h',word[i]);
    updateDiv('the-p',explanation[i])
    // then call whatever it is to trigger the update within the page
}

getViaAjax("external-file.json", yourLoadingFunction)

javascript ajax json parsing

Answer 1

Answer №1

In agreement with @light's statement, this can be seen as:

function fetchWithAjax("external-data.json", handler) { // specifying the URL of the external JSON file
  var request = new XMLHttpRequest();
  request.open("GET", "external-data.json", true);

The revised version should look like this:

function fetchWithAjax(url, handler) { // specifying the URL of the external JSON file
  var request = new XMLHttpRequest();
  request.open("GET", url, true);

Answer 2

In agreement with @light's statement, this can be seen as:

function fetchWithAjax("external-data.json", handler) { // specifying the URL of the external JSON file
  var request = new XMLHttpRequest();
  request.open("GET", "external-data.json", true);

The revised version should look like this:

function fetchWithAjax(url, handler) { // specifying the URL of the external JSON file
  var request = new XMLHttpRequest();
  request.open("GET", url, true);

Answer 3

Answer №2

In case you need help isolating your issue, I have created a sample that you can use. Simply set it up on a local http-server of your choice, and when you run it, you will see that JSON.parse(xhr.response) will give you a JavaScript array with two objects.

There are two files included:

data.json
index.html

data.json

<html>
    <head>
    </head>
    <body onload="so.getJsonStuffs()">
        <h1>so.json-with-ajax</h1>
        <script type="application/javascript">
        var so = (function(){

            function loadData(data){
               var list = document.createElement("ul");
               list.id = "data-list";
               data.forEach(function(element){
                   var item = document.createElement("li");
                   var content = document.createTextNode(JSON.stringify(element));

                   item.appendChild(content);
                   list.appendChild(item);
               });
               document.body.appendChild(list);
           }

            var load = function()
            {
                console.log("Initializing xhr");
                var xhr = new XMLHttpRequest();

                xhr.onload = function(e){
                    console.log("response has returned");
                    if(xhr.status > 200
                    && xhr.status < 400) {
                        var payload = JSON.parse(xhr.response);
                        console.log(payload);
                        loadData(payload);
                    }
                }
                var uri = "data.json";
                console.log("opening resource request");
                xhr.open("GET", uri, true);
                xhr.send();
            }

            return {
                getJsonStuffs : load
            }
        })();
        </script>
    </body>
</html>

Upon running this code, two JavaScript objects will be logged in the Developer Tools console. Additionally, a ul element will be added to the DOM, containing a list item for each object in the data.json array.

Answer 4

In case you need help isolating your issue, I have created a sample that you can use. Simply set it up on a local http-server of your choice, and when you run it, you will see that JSON.parse(xhr.response) will give you a JavaScript array with two objects.

There are two files included:

data.json
index.html

data.json

<html>
    <head>
    </head>
    <body onload="so.getJsonStuffs()">
        <h1>so.json-with-ajax</h1>
        <script type="application/javascript">
        var so = (function(){

            function loadData(data){
               var list = document.createElement("ul");
               list.id = "data-list";
               data.forEach(function(element){
                   var item = document.createElement("li");
                   var content = document.createTextNode(JSON.stringify(element));

                   item.appendChild(content);
                   list.appendChild(item);
               });
               document.body.appendChild(list);
           }

            var load = function()
            {
                console.log("Initializing xhr");
                var xhr = new XMLHttpRequest();

                xhr.onload = function(e){
                    console.log("response has returned");
                    if(xhr.status > 200
                    && xhr.status < 400) {
                        var payload = JSON.parse(xhr.response);
                        console.log(payload);
                        loadData(payload);
                    }
                }
                var uri = "data.json";
                console.log("opening resource request");
                xhr.open("GET", uri, true);
                xhr.send();
            }

            return {
                getJsonStuffs : load
            }
        })();
        </script>
    </body>
</html>

Upon running this code, two JavaScript objects will be logged in the Developer Tools console. Additionally, a ul element will be added to the DOM, containing a list item for each object in the data.json array.

Accessing information from JSON files using AJAX

Answer №1

Answer №2

Similar questions

How to manage multiple items within a single MUI/React TextField

My Next.js application is successfully making Axios API calls to my localhost while running on the server-side

Stuffing a container with an image without considering the proportions

Guide on effectively sending a secondary parameter in an ajax request

What could be the reason behind TypeScript ignoring a variable's data type?

Having trouble with the anchor tag not functioning properly

Exploring the distinctions between ajax, await, async, and

Can an array be used as valid JSON for a REST api?

When working with NextJs, you may encounter a ValidationError indicating that the configuration object is invalid. This error occurs when Webpack has been initialized with a configuration object that doesn't

What is the best way to send props from page.js to layout.js in the Next.js app directory?

Ways to eliminate the worldwide model in SAPUI5

Refresh only a portion of a page using PHP and JavaScript

Trigger a unique event using Vanilla JS and then detect it on Vue instances

Add a click event listener to the body element using a button click, without causing it to trigger

Creating a wrapper class in Express JS: A step-by-step guide

Is there a way to extract rows from a React MUI DataGrid that are identical to how they are displayed, including any filtering and sorting applied?

Trigger the jQuery function based on the ID modification executed by jQuery

Updating the JSON data with a new row

The connection was refused by hapi.js

Aligning text vertically to the top with material UI and the TextField component