Unable to Retrieve JSON data from server and storing it in a Javascript Array

Question

Unable to Retrieve JSON data from server and storing it in a Javascript Array

I'm relatively new to delving into the realm of JavaScript and JSON, and finding it quite challenging. My current struggle involves accessing and parsing a JSON file stored on my web server into a JavaScript object. What I aim to accomplish is parsing the JSON data into an array and then manipulating that array based on various user inputs.

Here's a snippet of what the JSON data looks like:

{"log":
[{
"name":"Al",
"entries":[8,12,16,19]},
{"name":"Steve",
"entries":[11,17,22]}]}

The task at hand is to extract one of the entry arrays and store it as a JavaScript object in an array format. Here's the approach I've taken so far:

var entriesLogged;

fetch ('url to the json file').then(function(response){
  return response.json();
}).then(function(data){
  entriesLogged = data.log[0].entries;
});

Unfortunately, I've been unable to make this work effectively and persistently assign the value to the variable beyond its scope. While I was able to log the array values using console.log, manipulating the data as an object proved to be more challenging. Ideally, I would like to parse the JSON file from the server directly into a global array.

Most of the tutorials I've consulted thus far focused on logging or displaying JSON data on HTML elements, whereas my focus lies on storing these values to a global array first.

Any insights or advice on how to achieve this would be greatly appreciated.

Warm regards, Dom

javascript arrays json fetch-api

Answer 1

Answer №1

Have you considered the timing of manipulating the entriesLogged variable after the fetch promise chain? Since the fetch operation is asynchronous, any code following the fetch chain will execute before the fetch operation is completed.

var entriesLogged;

fetch('url to the json file').then(function(response){
  return response.json();
}).then(function(data){
  entriesLogged = data.log[0].entries;
});

// The code below will run before the fetch chain completes
// Consequently, if you use entriesLogged here, it will be null

console.log(entriesLogged); // entriesLogged is null

A possible solution could involve:

.then(function(data){
  entriesLogged = data.log[0].entries;
  myFunction(entriesLogged);
});

function myFunction(myData) {
  console.log(myData); // can access entriesLogged here
}

Answer 2

Have you considered the timing of manipulating the entriesLogged variable after the fetch promise chain? Since the fetch operation is asynchronous, any code following the fetch chain will execute before the fetch operation is completed.

var entriesLogged;

fetch('url to the json file').then(function(response){
  return response.json();
}).then(function(data){
  entriesLogged = data.log[0].entries;
});

// The code below will run before the fetch chain completes
// Consequently, if you use entriesLogged here, it will be null

console.log(entriesLogged); // entriesLogged is null

A possible solution could involve:

.then(function(data){
  entriesLogged = data.log[0].entries;
  myFunction(entriesLogged);
});

function myFunction(myData) {
  console.log(myData); // can access entriesLogged here
}

Answer 3

Answer №2

The issue at hand is due to the asynchronous nature of the function call. When the call is made, a new thread is generated and JavaScript proceeds to the next line without waiting for the call to complete.

var recordsRetrieved;
fetch(something).then(function(data){recordsRetrieved = data[0]}); // this operation moves to a separate thread and takes approximately 5 milliseconds, but JavaScript does not pause for it to finish
console.log(recordsRetrieved); // this statement gets executed before the call is completed

Answer 4

The issue at hand is due to the asynchronous nature of the function call. When the call is made, a new thread is generated and JavaScript proceeds to the next line without waiting for the call to complete.

var recordsRetrieved;
fetch(something).then(function(data){recordsRetrieved = data[0]}); // this operation moves to a separate thread and takes approximately 5 milliseconds, but JavaScript does not pause for it to finish
console.log(recordsRetrieved); // this statement gets executed before the call is completed

Answer 5

Answer №3

When it comes to addressing variations of a specific issue, there are countless "answers" available that only explain the problem without providing a solution. (tl;dr: check out the last block of code for the solution)

The main problem lies in the fact that .fetch('URL.json') and .json() functions are asynchronous calls. This means that while the script starts processing these calls, it continues executing other commands in the script even before the async calls are completed. As a result, if you encounter a command before these asynchronous calls finish, your script won't have the necessary data.

To gain a comprehensive understanding of how asynchronous calls work in JavaScript, various resources are available. One such resource is this link: How do I return the response from an asynchronous call?

If you prefer a synchronous approach to coding like myself, a quick workaround involves creating an async main loop and utilizing the await keyword when calling async functions where you need to wait for the data to be fetched.

An example of a main loop:

(async () => {
    // insert main loop code here
})();

You can then place your code within this main loop, ensuring that you prefix every async function with the await keyword. In the given example below, ensure that your .then() functions requiring await are also declared as async. While this may seem complex initially, I will simplify it later on. Here's a revised version based on the original code:

(async () => {
    var entriesLogged;

    await fetch('url_to_the_file.json')
        .then( async function(response){
            return await response.json();
        })
        .then( function(data){
            entriesLogged = data;
        });
})();

The use of .then() is usually for post-processing tasks within async calls, but since we aim to make it synchronous in this case, we can streamline the code by breaking down the commands individually:

// Begin main loop
(async () => {
    let response = await fetch('url_to_the_file.json');
    let entriesLogged = await response.json();
})();

This should provide you with the desired outcome and hopefully prevent others from spending hours trying to resolve a seemingly simple issue.

Credit goes to the source where this solution was found: https://www.sitepoint.com/delay-sleep-pause-wait/

Answer 6

When it comes to addressing variations of a specific issue, there are countless "answers" available that only explain the problem without providing a solution. (tl;dr: check out the last block of code for the solution)

The main problem lies in the fact that .fetch('URL.json') and .json() functions are asynchronous calls. This means that while the script starts processing these calls, it continues executing other commands in the script even before the async calls are completed. As a result, if you encounter a command before these asynchronous calls finish, your script won't have the necessary data.

To gain a comprehensive understanding of how asynchronous calls work in JavaScript, various resources are available. One such resource is this link: How do I return the response from an asynchronous call?

If you prefer a synchronous approach to coding like myself, a quick workaround involves creating an async main loop and utilizing the await keyword when calling async functions where you need to wait for the data to be fetched.

An example of a main loop:

(async () => {
    // insert main loop code here
})();

You can then place your code within this main loop, ensuring that you prefix every async function with the await keyword. In the given example below, ensure that your .then() functions requiring await are also declared as async. While this may seem complex initially, I will simplify it later on. Here's a revised version based on the original code:

(async () => {
    var entriesLogged;

    await fetch('url_to_the_file.json')
        .then( async function(response){
            return await response.json();
        })
        .then( function(data){
            entriesLogged = data;
        });
})();

The use of .then() is usually for post-processing tasks within async calls, but since we aim to make it synchronous in this case, we can streamline the code by breaking down the commands individually:

// Begin main loop
(async () => {
    let response = await fetch('url_to_the_file.json');
    let entriesLogged = await response.json();
})();

This should provide you with the desired outcome and hopefully prevent others from spending hours trying to resolve a seemingly simple issue.

Credit goes to the source where this solution was found: https://www.sitepoint.com/delay-sleep-pause-wait/

Unable to Retrieve JSON data from server and storing it in a Javascript Array

Answer №1

Answer №2

Answer №3

Similar questions

Mastering the art of sorting HTML tables with various columns using JavaScript and jQuery

How to delete vertices and their properties from a BufferGeometry using Three.js

Varying outcomes in mongo due to specific field uniqueness

Issues with Firebase Cloud function for parsing form data

Invoke the parent method within the child application

Can records be searched for in a table based on the value in an object, without needing to specify a key?

What is the best way to accomplish this in Next.js?

Is there a way for me to confirm that every character in one word also appears in another word?

Is the interpretation of A[i][j] impacted by the way A is defined in C programming?

automatically created button, form control named 'answer' that is not valid

Custom field security rules in Firebase

(WebApi) Unable to convert a collection of objects to Json serialization

How can you prevent JQuery AJAX from automatically redirecting after a successful form submission?

Creating a three.js shader that continuously moves the vertices of a point cloud within a sphere

Verify that all dynamic radio buttons have been selected prior to submitting the form

In search of a JavaScript library that can help format strings to meet the requirements of JSON formatting

es-lint is issuing a warning about the presence of multiple modules within the node_modules directory that have names differing only in their casing

Utilizing the `this` keyword within a click handler that is passed through an intermediary function

How can I detect the scroll action on a Select2 dropdown?

The Angular ui-calendar introduces an innovative approach to event addition, providing users with