Изменение метки объекта по определенному значению в js
Я работаю над диаграммами в React.js и хочу отображать данные, отсортированные по месяцам. В django я создал представление для отображения json с общим количеством событий за месяц, и оно выглядит следующим образом:
[
{
"month": "2022-06-01T00:00:00+02:00",
"total": 4
},
{
"month": "2022-08-01T00:00:00+02:00",
"total": 1
}
]
]
Я хочу отсортировать каждый объект в этом массиве и изменить значение 'month' с цифр на название месяца, так что это будет:
[
{
"month": "june",
"total": 4
},
{
"month": "august",
"total": 1
}
]
]
Для построения графиков я использую chartist.
Вы можете хранить полную дату как отдельный ключ (с именем date), а месяц устанавливать в отдельной функции, используя предопределенный массив для названий каждого месяца. Вот код, который вы бы использовали:
const monthName = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"]; // Array representing each month
var chartItems = [
{
"date": "2022-06-01T00:00:00+02:00",
"month": null,
"total": 4
},
{
"date": "2022-08-01T00:00:00+02:00",
"month": null,
"total": 1
}
];
// Run through each item in the array
function setMonths(arr) {
arr.forEach(item => {
const date = new Date(item.date); // Convert date string to Date object
const monthIndex = date.getMonth(); // Get index of month from the Date
const month = monthName[monthIndex]; // Convert index into text representing the month
item.month = month; // Set the month key in the object to the new month
});
}
setMonths(chartItems); // Call function to set months in the array
В качестве альтернативы можно также сделать метод для каждого объекта в массиве, который получает месяц, но его нужно будет запускать каждый раз, когда вы хотите получить месяц. Вот код для этого:
const monthName = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
var chartItems = [
{
"date": "2022-06-01T00:00:00+02:00",
"month": function() { return monthName[new Date(this.date).getMonth()]; },
"total": 4
},
{
"date": "2022-08-01T00:00:00+02:00",
"month": function() { return monthName[new Date(this.date).getMonth()]; },
"total": 1
}
];
И вы получите его следующим образом:
chartItems[0].month(); // "[0]", meaning the first item in the array