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

Creating a Dynamic Cascading Dropdown Menu in ASP.Net MVC2

Difficulty reloading after updating input using AngularJS ngTable

Sticky header/navigation bar implementation in React Native for consistent navigation across views

Model of Objects within a Document

Angular: Enhancing URL links

Debouncing in AngularJS with $watch

What is the best method for interpreting XML using JavaScript?

The issue of data not being transmitted when an ajax jquery form is modified

Loading slides in bxSlider using ajax

Merging arrays with the power of ES6 spread operator in Typescript

Is the `visibility: hidden` property not functioning as expected?

Node.js' Express WebSocket adds complexity to JSON with additional characters

Experiencing a problem with a loop structure in my code

Simulate a keyboard key being pressed and held for 5 seconds upon loading the page

The functionality of a switch statement relies on the presence of a React-Router

How can a JavaScript function be imported into a React component from a location outside the src folder?

Tips to avoid conflicts between endpoints when building a REST API in an Express application

The input '{ data: InvitedUser[]; "": any; }' does not match the expected type 'Element'

Having trouble pushing to an array in Angular typescript? It seems to be returning as undefined

What's the best way to retrieve the id or index of a card within a list?