-1

I am using an api to get holidays and their respective date. I took the values from the JSON file and made an array of arrays from it.

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;
}

When outputting the result the whole array-object (ulHolidays) seems fine but accesing items returns undefined. -_-

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

^ The first one works but the secons one returns undefined. ^

This is the output when console-logging 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)
LIx
  • 11
  • JS programming note:instead of `new Array()`, use the array literal `[]`. Also, if you're using `const`, don't use `var`, use `let`. Also also, remember that `JSON.parse` _will_ throw on errors, so add a try/catch. – Mike 'Pomax' Kamermans Dec 11 '20 at 23:46
  • can you please provide a reproducible snippet? Maybe move the API return to a JSON object and reproduce the console logs here so we can check better. – Renan Souza Dec 11 '20 at 23:46
  • You didn't give us enough to say, but judging from `.responseText` you are almost certainly trying to push an async result into a synchronously accessed array. Remember that console.log itself isn't synchronous, and it shows a *live view* of objects, not a snapshot of what they're like at the time the log call came in. – Jared Smith Dec 11 '20 at 23:47
  • There is no `ulHolidays` defined, in the OP, before it is returned – Taplar Dec 11 '20 at 23:47
  • What is `this.responseText`? That's usually used in an XMLHttpRequest callback function. – Barmar Dec 11 '20 at 23:48
  • I suspect you have AJAX code in the function. That runs asynchronously, so the returned array isn't filled in until later. The console shows you the array after it's all filled in, but the array isn't filled in when it's returned to the caller. – Barmar Dec 11 '20 at 23:50
  • @Barmar Yes, that is the case. It is most definetly a problem with retrieving results from an asynchronous call. This [link](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call?noredirect=1&lq=1) I got recommended discusses the problem you all proposed in detail. thanks :) – LIx Dec 12 '20 at 00:53
  • @JaredSmith Thanks for the description, have no prior experience w/ AJAX so that really helped. I think you all hit the nail on the head and it is definitly a problem with retrieving results from AJAX. I'm wondering what this answers implies in regards to solving my problem. – LIx Dec 12 '20 at 01:04

1 Answers1

0

Instead of using console.log() , try using this code and using the outputText function.

function outputText(text){
// create paragraph element
var para = document.createElemeent("p");
// use para to print text
para.innerHTML = text;
}
Ethan Eyob
  • 19
  • 4