retrieving elements from an array object results in an undefined value

Utilizing an API to retrieve holidays and their corresponding dates, I extracted values from a JSON file and organized them into an array of arrays.

function getHolidays(){
(...)
var ulHoliday = new Array();
var txt = JSON.parse(this.responseText);
const holidays = txt.response.holidays;
    for(hd of holidays){
      let holidayName = hd.name;
      let holidayDate = hd.date.iso;
      ulHoliday.push({name: holidayName, date: holidayDate});
  }
  return ulHolidays;
}

While the entire array-object (ulHolidays) displays correctly when outputted, accessing items afterwards returns undefined. -_-

console.log(getHolidays()); // ulHolidays
console.log(getHolidays()[0].name); // undefined

^ The first log works as expected but the second one returns undefined. ^

This is the console output for ulHolidays.

[]
0: {name: "Second Advent Sunday", date: "2020-12-06"}
1: {name: "Saint Nicholas Day", date: "2020-12-06"}
2: {name: "Third Advent Sunday", date: "2020-12-13"}
3: {name: "Remembrance Day for Roma and Sinti killed by Genocide", date: "2020-12-19"}
4: {name: "Fourth Advent Sunday", date: "2020-12-20"}
5: {name: "December Solstice", date: "2020-12-21T11:02:20+01:00"}
6: {name: "Christmas Eve", date: "2020-12-24"}
7: {name: "Christmas Day", date: "2020-12-25"}
8: {name: "Boxing Day", date: "2020-12-26"}
9: {name: "New Year's Eve", date: "2020-12-31"}
length: 10
__proto__: Array(0)

Answer №1

Try an alternative to console.log() by using the code snippet below with the outputText function.

function outputText(text){
// create a new paragraph element
var para = document.createElement("p");
// assign the text to para
para.innerHTML = text;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the functionalities of objects in Typescript through the use of the for...in loop

After successfully converting the JavaScript function to Typescript, I encountered an issue with the line if (!(key * key) in frequencyCounter2) {. The error message displayed was: "The left-hand side of an 'in' expression must be of type &a ...

Images fail to display on iOS devices using the Ionic Framework

I'm a beginner when it comes to the Ionic Framework, and I've encountered an issue with loading images. After receiving a list of image URLs from the server through a GET request, I can see the images' layout in Chrome's "Inspect eleme ...

What is the best way to send a JSON response from a Symfony2 controller?

I am utilizing jQuery to modify my form, which is created using Symfony. The form is displayed within a jQuery dialog and then submitted. Data is successfully stored in the database. However, I am unsure if I need to send some JSON back to jQuery. I am ...

Step-by-step guide on entering text into a hidden field with Selenium WebDriver and Java

I am currently utilizing WebDriver in conjunction with Java for automated testing. I have come across a hidden input field within the following HTML code: <input type="hidden" value="" name="body" id=":6b"> My challenge lies in trying to input data ...

Angular Dynamic Alert Service

Is it possible to customize the text in an Angular Alert service dynamically? I'm looking to make certain words bold, add new lines, and center specific parts of the text. Specifically, I want the word "success" to be bold and centered, while the rest ...

Extracting data from a secured internal website using web scraping and JavaScript notifications

Recently, I have been attempting to extract raw XML data from an internal company website (the URL has been omitted for security reasons). To achieve this, I am currently utilizing selenium and beautifulsoup, but I am open to exploring alternative options. ...

Creating an effect where an image gradually enlarges from its midpoint

A little while ago, I submitted a query about how to adjust the size of an image using the input type="range" feature. To my delight, user Prisoner provided me with a fantastic solution: <input id="ranger" type="range" min="1" max="100" value="100" /&g ...

Verify the pop-up browser window that appears when the page begins to reload using Cucumber

After completing one scenario, the page automatically refreshes. A JavaScript modal is displayed on the website asking the user "Are you sure you want to leave the page?" I need to confirm that modal, but every time I try to create a step for it, I encount ...

"Type Error: Attempting to assign a value to a const variable by declaring it as let while importing a variable from another file

Within JavaScript(Node.JS), I created a config.js file as shown below to export a variable named "name": Config.js export let name = "ayush"; Then, I imported the variable "name" into the index.js file index.js import {name} from "./config.js"; name = ...

What causes addEventListener to not return a value?

In this snippet of code: let rockClick = rockBtn.addEventListener('click', playRound.bind("rock", computerPlay(), false)); After using console.log(), the output is undefined. The purpose of rockBtn:const rockBtn = document.querySelecto ...

Working with large matrices saved in HDF5 datasets

Two large HDF5 files contain matrices with identical shapes. I want to create a third HDF5 file that holds the element-wise sum of these two matrices. Since the matrices are very large (measuring in Gb-Tb), I am looking for the most efficient way to do t ...

Is there a more efficient method using Node.js, Express, and MySQL?

I'm looking for a more efficient way to handle the task at hand. Essentially, I need to keep a track record within a record that is being inserted into a database. This means storing a history of all changes made to the record whenever it gets updated ...

An uncaught error occurred in ReactJs while trying to read the property 'map' of an undefined variable within the {Component} component

As I pass my array to the props of the sidebar component and try to access it in my child component... After saving the code and checking the browser, an error message pops up: https://i.stack.imgur.com/6cPY8.png import React, { Component } from 're ...

How to send parameters through the Google Maps API URL using Vue.js

When using $router.push(), I receive two parameters: {{ this.$route.params.lat }} and {{ this.$route.params.lng }}, which are latitude and longitude coordinates. To access a Google Maps URL, I need to include both of these parameters: https://maps.googlea ...

Cordova does not support the transform property

In the process of creating an Apache Cordova app using the Ionic framework and working with Phonegap Build, I encountered a challenge. The main page of my app features rows of icons that appear like this: https://i.sstatic.net/7LE7r.png However, there is ...

Steps to open a webpage with a URL that includes #tags=green, pink, and white at the conclusion

Here's the challenge - Open your page with a URL that includes #tags=green,pink,white at the end Create a JavaScript script that extracts the tags from the URL and displays them in a list, with each tag as a separate list item. For instance, if the ...

Display or hide an image in Angular when a button is clicked

I am facing an issue in my code where I want to show and hide an image through a link when a button is clicked. Currently, when I click the button, the image opens in a new tab in Chrome instead of displaying it on my app's page. I need to link the UR ...

Updating values within an ng-template can be achieved by accessing and modifying the

I have come across this specific template <script type="text/ng-template" id="template"> <span class="count-container"> <span >{{count}}</span> </span> </script> and it is being included multiple times ...

Is it possible to retrieve the HttpsError status from a Firebase function?

Within my firebase function, I deliberately throw an error with a specific status and message using the following code: throw new functions.https.HttpsError('permission-denied', 'Token does not match'); When I receive the server respo ...

Execute the PHP POST request to query "SELECT * FROM .... WHERE ..."

Trying to send a user's ID from my Android app to retrieve their information from the SQLite database on the server using the $_POST method request. Following tutorials, I learned that mysqli_query() will return an Object for a successful SELECT query ...