Difficulty encountered when trying to retrieve the data stored within the ARRAY

Question

Difficulty encountered when trying to retrieve the data stored within the ARRAY

I am fairly new to JavaScript and I have encountered a peculiar issue while trying to access items stored in an Array within a JavaScript object.

Code

var Exp = {"no":Array(), "dateFrom":Array()}
readData();
function readData() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', sheet, true);
    xhr.onload = function () {
        if (this.status === 200) {
            const response = JSON.parse(this.responseText);
            const feeds = response.feed.entry;
            feeds.forEach(function (post) {
                Exp["no"].push(post.gsx$no.$t);
                Exp["dateFrom"].push(post.gsx$from.$t);
            });
        }
    }
    xhr.send();
};
var lengthNo = Object.keys(Exp.no).length;
var valueZero = Exp.no[0];
console.log(lengthNo, valueZero, Exp);

Console result

0 undefined 
{no: Array(0), dateFrom: Array(0)}
no: (4) ["1", "2", "3", "4"]
dateFrom: (4) ["02/2001", "07/2006", "11/2008", "03/2014"]
__proto__: Object

When running this in the console, everything works perfectly. Any idea why it's not functioning correctly in the script file?

javascript arrays

Answer 1

Answer №1

To properly handle the data retrieval process, it is imperative to reposition the following code snippet:

var lengthNo = Object.keys(Exp.no).length;
var valueZero = Exp.no[0];
console.log(lengthNo, valueZero, Exp);

within the xhr.onload function block:

xhr.onload = function () {
    if (this.status === 200) {
        const response = JSON.parse(this.responseText);
        const feeds = response.feed.entry;

        feeds.forEach(function (post) {
            Exp["no"].push(post.gsx$no.$t);
            Exp["dateFrom"].push(post.gsx$from.$t);
        });

        var lengthNo = Object.keys(Exp.no).length;
        var valueZero = Exp.no[0];
        console.log(lengthNo, valueZero, Exp);
    }
}

This adjustment is necessary due to the asynchronous behavior exhibited by the xhr request.

Answer 2

To properly handle the data retrieval process, it is imperative to reposition the following code snippet:

var lengthNo = Object.keys(Exp.no).length;
var valueZero = Exp.no[0];
console.log(lengthNo, valueZero, Exp);

within the xhr.onload function block:

xhr.onload = function () {
    if (this.status === 200) {
        const response = JSON.parse(this.responseText);
        const feeds = response.feed.entry;

        feeds.forEach(function (post) {
            Exp["no"].push(post.gsx$no.$t);
            Exp["dateFrom"].push(post.gsx$from.$t);
        });

        var lengthNo = Object.keys(Exp.no).length;
        var valueZero = Exp.no[0];
        console.log(lengthNo, valueZero, Exp);
    }
}

This adjustment is necessary due to the asynchronous behavior exhibited by the xhr request.

Answer 3

Answer №2

If you want to access the contents of your specific object, you can use the Object.keys() method which will give you an array of all the properties. In this case, since the object contains arrays under the keys no and dateFrom, you can directly retrieve the values by referencing Exp.no.

var Exp = {"no":["1", "2", "3", "4"], "dateFrom":["02/2001", "07/2006", "11/2008", "03/2014"]}
var lengthNo = Exp.no.length;
var valueZero = Exp.no[0];
console.log(lengthNo, valueZero, Exp);

Answer 4

If you want to access the contents of your specific object, you can use the Object.keys() method which will give you an array of all the properties. In this case, since the object contains arrays under the keys no and dateFrom, you can directly retrieve the values by referencing Exp.no.

var Exp = {"no":["1", "2", "3", "4"], "dateFrom":["02/2001", "07/2006", "11/2008", "03/2014"]}
var lengthNo = Exp.no.length;
var valueZero = Exp.no[0];
console.log(lengthNo, valueZero, Exp);

Answer 5

Answer №3

If you're looking for a straightforward method, consider this simple approach. Here's how you can create a JavaScript object:

const Experience = {number: [], startDate: []};
const numberLength = Experience['number'].length || Experience.number.length;
const firstValue = Experience['number'][0] || Experience.number[0]; // This will output 0

Answer 6

If you're looking for a straightforward method, consider this simple approach. Here's how you can create a JavaScript object:

const Experience = {number: [], startDate: []};
const numberLength = Experience['number'].length || Experience.number.length;
const firstValue = Experience['number'][0] || Experience.number[0]; // This will output 0

Difficulty encountered when trying to retrieve the data stored within the ARRAY

Answer №1

Answer №2

Answer №3

Similar questions

What is the approach for utilizing Vue List Rendering with v-if to verify the presence of items within an array?

AngularJS: The art of object pushing

Personalized HTML Input Field for Digital Keyboard Scores

Tips for managing extended HTTP requests

Calculating the mean of student scores using a two-dimensional array

I am looking to avoid showing duplicate items in the rendering process and instead display the number of duplicates in the item_number column, but unfortunately the map functionality does not support this

Remove the active class after it has been clicked for the second time

Can Browserify be used with AngularJS to bundle directive templateUrls using relative paths?

Received undefined instead of a Promise or value from the function in Nodemailer

What is the process for accessing a URL using a web browser and receiving a plain text file instead of HTML code?

What type of element should I utilize - a submit button, a standard button, or a hyperlink - to execute this task?

I lingered a moment too long on the left and right buttons of my Carousel

Strange behavior exhibited by the HTML DataList component within an Angular application

Interested in receiving a concise, text-only snippet from a WordPress article?

There seems to be an issue with the SimpleSchema: The modifier is appearing empty after removing keys that are not in the schema

Why is it that despite passing all the unit tests successfully, the function fails when used in its actual context with the same parameters?

Attempting to dynamically change the text of a button in JavaScript without any user interaction

Issue: Module '/Users/MYNAME/Desktop/Projects/MYPROJECTNAME' not found

Leveraging Angular for dynamic HTML form type setting

perform Transpose on a 4-dimensional numpy array