Tips for representing entire months as object keys using numerical values

Question

Tips for representing entire months as object keys using numerical values

Currently, I find myself a bit puzzled as to why my code is not functioning as expected, and I am hopeful that you all could assist me in solving this issue.

The data structure I am working with consists of years and corresponding months.

chosenMonths = {[
    2022: [0,1,2]
    2018: [9,10]
    2017: [11]
]}

I have a function designed to convert numerical values into their respective month names:

const writeOutMonth = function(num, locale) {
    const date = new Date();
    date.setMonth(num);

    return date.toLocaleString(locale, {month: 'long',});
}

Within my code, there is an Object.keys method to display the year followed by the written out months on the screen.

${Object.keys(chosenMonths).reverse().map((year) => html`<p1> ${year}: ${writeOutMonth(chosenMonth[year].sort().join(', '), 'en-gb')}</p>`)}

At present, the output appears as follows:

2022: Invalid Date
2021: Invalid Date
2017: December

My query is: why does it show "Invalid Date" for some entries even though multiple numbers are specified for certain years, and how can I rectify this?

javascript arrays object lit

Answer 1

Answer №1

I made necessary modifications to ensure the code would run smoothly. The issue was related to passing a string of months instead of individual months. I updated the method to accept an array of months and added a sorting function to the sort() as well.

selectedMonths = {
  2022: [0, 1, 2],
  2018: [9, 10],
  2017: [11],
};

const displayMonthNames = function (monthArray, language) {
  let monthNames = [];

  monthArray.forEach((mon) => {
    const date = new Date();
    date.setMonth(mon);
    monthNames.push(date.toLocaleString(language, { month: "long" }));
  });

  return monthNames.join(", ");
};

let output = Object.keys(selectedMonths)
  .reverse()
  .map(
    (year) =>
      `<p1> ${year}: ${displayMonthNames(
        selectedMonths[year].sort((a, b) => a - b),
        "en-gb"
      )}</p>`
  );

console.log(output);

Answer 2

I made necessary modifications to ensure the code would run smoothly. The issue was related to passing a string of months instead of individual months. I updated the method to accept an array of months and added a sorting function to the sort() as well.

selectedMonths = {
  2022: [0, 1, 2],
  2018: [9, 10],
  2017: [11],
};

const displayMonthNames = function (monthArray, language) {
  let monthNames = [];

  monthArray.forEach((mon) => {
    const date = new Date();
    date.setMonth(mon);
    monthNames.push(date.toLocaleString(language, { month: "long" }));
  });

  return monthNames.join(", ");
};

let output = Object.keys(selectedMonths)
  .reverse()
  .map(
    (year) =>
      `<p1> ${year}: ${displayMonthNames(
        selectedMonths[year].sort((a, b) => a - b),
        "en-gb"
      )}</p>`
  );

console.log(output);

Tips for representing entire months as object keys using numerical values

Answer №1

Similar questions

What is the reason for sending back an array with no elements in AJAX

Enable the x-axis months to be interactive in a chart.js line graph

Unveiling the Secrets of AJAX Requests with Enigmatic Strings Attached to URLs

Finding the Modular Reciprocal with JavaScript

Exploring the concept of reflection in JavaScript and jQuery

Tips for running Scrapy and Selenium on a webpage that utilizes angular JavaScript to serve data

Issues with React Material UI Dialog Displaying Incorrect Information

Can a websocket be used to communicate with a server that is not the same as the one hosting the html5 website?

using javascript to access an opened html div

Steps for assigning values to a JavaScript array using its indices

Function causing corruption in passed C char array

Creating an Array of dynamically generated elements using jQuery

Foundation Unveil Modal hidden from view

Rotate Text in HTML <thead> Tag

Establishing a pair of separate static directories within Nest

utilizing various ajax functions

Tips on elevating a dragged div above all other elements when utilizing two scrollbars

Learn the process of integrating VueJS with RequireJS

This error message in AngularJS indicates that the argument 'fn' is not being recognized as a function

Syncing data between parent and child components in VueJS using v-bind:sync with an object parameter for bidirectional data flow