Changing the structure of elements in an array using JavaScript

Question

Changing the structure of elements in an array using JavaScript

I am seeking a way to convert an array of strings, which represent dates in the format of 201001 ,201002, into something more readable like 2010 January, 2010 February. Do you have any suggestions on how to achieve this?

var Array = ["201005", "201006", "201007", "201008", "201009", "201010", "201011", "201012", "201101", "201102", "201103", "201104", "201106", "201107", "201108", "201109", "201110", "201111", "201112", "201201", "201202", "201203", "201204", "201205", "201206", "201207", "201208", "201209", "201210", "201211", "201212", "201301", "201302", "201303", "201304", "201305", "201306", "201307"];

The desired output would be :

var expected = ["2010 january", "2010 February" etc]

javascript arrays

Answer 1

Answer №1

Here is a possible solution:

const monthList = {
  "01": "January",
  "02": "February",
  "03": "March",
  "04": "April",
  "05": "May",
  "06": "June",
  "07": "July",
  "08": "August",
  "09": "September",
  "10": "October",
  "11": "November",
  "12": "December"
};

xAxisValues = xAxisValues.map(value => {
  const year = value.substring(0, 4);
  const month = value.substring(4, 6);

  return `${year} ${monthList[month]}`;
});

An alternative approach would be to employ moment.js, although it might be too much for this task.

Answer 2

Here is a possible solution:

const monthList = {
  "01": "January",
  "02": "February",
  "03": "March",
  "04": "April",
  "05": "May",
  "06": "June",
  "07": "July",
  "08": "August",
  "09": "September",
  "10": "October",
  "11": "November",
  "12": "December"
};

xAxisValues = xAxisValues.map(value => {
  const year = value.substring(0, 4);
  const month = value.substring(4, 6);

  return `${year} ${monthList[month]}`;
});

An alternative approach would be to employ moment.js, although it might be too much for this task.

Answer 3

Answer №2

Feel free to test out my implementation

function formatDateTime(date) {
  var monthNames = [
    "January", "February", "March",
    "April", "May", "June", "July",
    "August", "September", "October",
    "November", "December"
  ];

  var monthIndex = date.getMonth();
  var year = date.getFullYear();

  return year + ' ' + monthNames[monthIndex];
}


var result = xAxisArray.map(item => {
  var strDate = item.slice(0, 4) + '-' + item.slice(4, 6) + '-01'

  return formatDateTime(new Date(strDate))
})
console.log(result)

Check out this demo: https://codepen.io/phuongnm153/pen/xxKgKYp

Answer 4

Feel free to test out my implementation

function formatDateTime(date) {
  var monthNames = [
    "January", "February", "March",
    "April", "May", "June", "July",
    "August", "September", "October",
    "November", "December"
  ];

  var monthIndex = date.getMonth();
  var year = date.getFullYear();

  return year + ' ' + monthNames[monthIndex];
}


var result = xAxisArray.map(item => {
  var strDate = item.slice(0, 4) + '-' + item.slice(4, 6) + '-01'

  return formatDateTime(new Date(strDate))
})
console.log(result)

Check out this demo: https://codepen.io/phuongnm153/pen/xxKgKYp

Answer 5

Answer №3

If you're looking to manipulate dates in JavaScript, you can utilize the following code snippet:

var dateArray = ["202005", "202006", "202007", "202008", "202009", "202010", "202011", "202012", "202101", "202102", "202103", "202104", "202106", "202107", "202108", "202109", "202110", "202111", "202112", "202201", "202202", "202203", "202204", "202205", "202206", "202207", "202208", "202209", "202210", "202211", "202212", "202301", "202302", "202303", "202304", "202305", "202306", "202307"];

//Mapping month numbers to names
const monthLabels = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

//New array for formatted data
var formattedDates = [];

//Iterate through original array and format the date strings
dateArray.forEach(function(element) {
  var formattedDate = element.substr(0,4) + '-' + element.substr(4); //Insert dash between year and month
  var newDate = new Date(formattedDate); //Create new date object
  var year = newDate.getFullYear(); //Extract year
  var month = newDate.getMonth(); //Retrieve month

  formattedDates.push(year + ' ' + monthLabels[month]);
});

console.log(formattedDates);

To achieve this, convert string to date format, change it to the desired structure, and append the updated string to a fresh array.

Answer 6

If you're looking to manipulate dates in JavaScript, you can utilize the following code snippet:

var dateArray = ["202005", "202006", "202007", "202008", "202009", "202010", "202011", "202012", "202101", "202102", "202103", "202104", "202106", "202107", "202108", "202109", "202110", "202111", "202112", "202201", "202202", "202203", "202204", "202205", "202206", "202207", "202208", "202209", "202210", "202211", "202212", "202301", "202302", "202303", "202304", "202305", "202306", "202307"];

//Mapping month numbers to names
const monthLabels = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

//New array for formatted data
var formattedDates = [];

//Iterate through original array and format the date strings
dateArray.forEach(function(element) {
  var formattedDate = element.substr(0,4) + '-' + element.substr(4); //Insert dash between year and month
  var newDate = new Date(formattedDate); //Create new date object
  var year = newDate.getFullYear(); //Extract year
  var month = newDate.getMonth(); //Retrieve month

  formattedDates.push(year + ' ' + monthLabels[month]);
});

console.log(formattedDates);

To achieve this, convert string to date format, change it to the desired structure, and append the updated string to a fresh array.

Answer 7

Answer №4

If you wish to display the complete name of the month instead of just the first three letters, you must store all twelve months somewhere in your code, like this:

const MONTHS = [
  "January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

After that, you can use the following function:

const format = (value) => {
  // assuming the format is 4 digits followed by 2 digits
  const [, year, month] = value.match(/(\d{4})(\d{2})/);
  return `${year} ${MONTHS[month - 1]}`
}

Finally, you can apply this function to your array like so:

const results = dataArray.map(format);

I hope this solution proves helpful!

Answer 8

If you wish to display the complete name of the month instead of just the first three letters, you must store all twelve months somewhere in your code, like this:

const MONTHS = [
  "January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

After that, you can use the following function:

const format = (value) => {
  // assuming the format is 4 digits followed by 2 digits
  const [, year, month] = value.match(/(\d{4})(\d{2})/);
  return `${year} ${MONTHS[month - 1]}`
}

Finally, you can apply this function to your array like so:

const results = dataArray.map(format);

I hope this solution proves helpful!

Answer 9

Answer №5

One way to find your solution is by following this method.

xAxisArray.forEach(function(value , index){
    var last2 = value.slice(-2);
    const date = new Date(value.slice(4), last2);  // Example: 2009-11-10
    const month = date.toLocaleString('default', { month: 'long' });
    xAxisArray[index] = value.substring(0,4) +" "+ month;
});

This approach should help resolve your issue.

Answer 10

One way to find your solution is by following this method.

xAxisArray.forEach(function(value , index){
    var last2 = value.slice(-2);
    const date = new Date(value.slice(4), last2);  // Example: 2009-11-10
    const month = date.toLocaleString('default', { month: 'long' });
    xAxisArray[index] = value.substring(0,4) +" "+ month;
});

This approach should help resolve your issue.

Answer 11

Answer №6

If you need to achieve this task, consider utilizing the moment library:

const newData = xAxisArray.map(entry => {
  const year = entry.substring(0,4)
  const month = entry.substring(4,2)
  return moment(`01/${month}/${year}`).format('YYYY MMMM')
})
console.log(newData)

Answer 12

If you need to achieve this task, consider utilizing the moment library:

const newData = xAxisArray.map(entry => {
  const year = entry.substring(0,4)
  const month = entry.substring(4,2)
  return moment(`01/${month}/${year}`).format('YYYY MMMM')
})
console.log(newData)

Answer 13

Answer №7

Transform your data easily with moment.js library. Simply use the following expression:

moment("your value").format("YYYY MMM");

For example: moment(201005).format("YYYY MMM");

Answer 14

Transform your data easily with moment.js library. Simply use the following expression:

moment("your value").format("YYYY MMM");

For example: moment(201005).format("YYYY MMM");

Changing the structure of elements in an array using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Receiving an error of "undefined" when trying to capture the selected

Encountering an Unexpected Token Error while using Jest in Next.js for node-modules

Implementing a messaging feature with inbox functionality in a Node.js web application

Transferring data and parameters between the Client-Side and Server-Side

Having trouble escaping single quotes in JSON.stringify when using a replacer function

How to access data from a child component in a Vue 3 template

Vue select is causing the selected choice of another selector to be influenced

Having trouble getting nodeJS socket.io to function properly on my Raspberry Pi

Prevent the query from being executed by halting the AJAX call

Is it possible to find out which JavaScript file the AJAX function is using to send a request to a Java servlet?

Merging a variable and its corresponding value in JavaScript

Learn how to dynamically add a class to an element when hovering, and ensure that the class remains even after the mouse has

Deliver JSX components that match one or more keys in the array of strings

Issues with AngularJS ng-view not functioning as expected

Including extra js files disrupts the jQuery IntelliSense functionality

What is the reason behind ValidatorValidate() validating all RequiredFieldValidator controls on the page?

Tips for moving a div with a button in jQuery

Displaying data metrics with Radar Charts in chart.js to illustrate point values

The designated origin in JavaScript is not displaying in the Django template

How come my function is executing right away despite the setTimeout() being called?