Angular/General JS Date formating

JavaScript
#1

Hi, I’m making a Angular weather app using the Accuweather API, I’m able to fetch and display the data as needed but the date is not in the correct format e.g
2022-09-11T07:00:00+02:00 instead of 11 September 2022. i would like to make the necessary formatting to make it more readable. The data fetched is stored in a array. the dates are in a array within the object.

{
  "Headline": {
    "EffectiveDate": "2022-09-11T19:00:00+02:00",
    "EffectiveEpochDate": 1662915600,
    "Severity": 3,
    "Text": "Expect showers Sunday evening",
    "Category": "rain",
    "EndDate": "2022-09-12T01:00:00+02:00",
    "EndEpochDate": 1662937200,
    "MobileLink": "http://www.accuweather.com/en/za/durban/305605/daily-weather-forecast/305605?lang=en-us",
    "Link": "http://www.accuweather.com/en/za/durban/305605/daily-weather-forecast/305605?lang=en-us"
  },
  "DailyForecasts": [
    {
      "Date": "2022-09-11T07:00:00+02:00",
      "EpochDate": 1662872400,
      "Temperature": {
        "Minimum": {
          "Value": 62,
          "Unit": "F",
          "UnitType": 18
        },
        "Maximum": {
          "Value": 75,
          "Unit": "F",
          "UnitType": 18
        }
      },
      "Day": {
        "Icon": 13,
        "IconPhrase": "Mostly cloudy w/ showers",
        "HasPrecipitation": true,
        "PrecipitationType": "Rain",
        "PrecipitationIntensity": "Light"
      },
      "Night": {
        "Icon": 12,
        "IconPhrase": "Showers",
        "HasPrecipitation": true,
        "PrecipitationType": "Rain",
        "PrecipitationIntensity": "Moderate"
      },
      "Sources": [
        "AccuWeather"
      ],
      "MobileLink": "http://www.accuweather.com/en/za/durban/305605/daily-weather-forecast/305605?day=1&lang=en-us",
      "Link": "http://www.accuweather.com/en/za/durban/305605/daily-weather-forecast/305605?day=1&lang=en-us"
    },
    {
      "Date": "2022-09-12T07:00:00+02:00",
      "EpochDate": 1662958800,
      "Temperature": {
        "Minimum": {
          "Value": 57,
          "Unit": "F",
          "UnitType": 18
        },
        "Maximum": {
          "Value": 65,
          "Unit": "F",
          "UnitType": 18
        }
      },
      "Day": {
        "Icon": 18,
        "IconPhrase": "Rain",
        "HasPrecipitation": true,
        "PrecipitationType": "Rain",
        "PrecipitationIntensity": "Light"
      },
      "Night": {
        "Icon": 40,
        "IconPhrase": "Mostly cloudy w/ showers",
        "HasPrecipitation": true,
        "PrecipitationType": "Rain",
        "PrecipitationIntensity": "Light"
      },
      "Sources": [
        "AccuWeather"
      ],
      "MobileLink": "http://www.accuweather.com/en/za/durban/305605/daily-weather-forecast/305605?day=2&lang=en-us",
      "Link": "http://www.accuweather.com/en/za/durban/305605/daily-weather-forecast/305605?day=2&lang=en-us"
    },
    {
      "Date": "2022-09-13T07:00:00+02:00",
      "EpochDate": 1663045200,
      "Temperature": {
        "Minimum": {
          "Value": 61,
          "Unit": "F",
          "UnitType": 18
        },
        "Maximum": {
          "Value": 68,
          "Unit": "F",
          "UnitType": 18
        }
      },
      "Day": {
        "Icon": 6,
        "IconPhrase": "Mostly cloudy",
        "HasPrecipitation": false
      },
      "Night": {
        "Icon": 7,
        "IconPhrase": "Cloudy",
        "HasPrecipitation": false
      },
      "Sources": [
        "AccuWeather"
      ],
      "MobileLink": "http://www.accuweather.com/en/za/durban/305605/daily-weather-forecast/305605?day=3&lang=en-us",
      "Link": "http://www.accuweather.com/en/za/durban/305605/daily-weather-forecast/305605?day=3&lang=en-us"
    },
    {
      "Date": "2022-09-14T07:00:00+02:00",
      "EpochDate": 1663131600,
      "Temperature": {
        "Minimum": {
          "Value": 62,
          "Unit": "F",
          "UnitType": 18
        },
        "Maximum": {
          "Value": 73,
          "Unit": "F",
          "UnitType": 18
        }
      },
      "Day": {
        "Icon": 2,
        "IconPhrase": "Mostly sunny",
        "HasPrecipitation": false
      },
      "Night": {
        "Icon": 33,
        "IconPhrase": "Clear",
        "HasPrecipitation": false
      },
      "Sources": [
        "AccuWeather"
      ],
      "MobileLink": "http://www.accuweather.com/en/za/durban/305605/daily-weather-forecast/305605?day=4&lang=en-us",
      "Link": "http://www.accuweather.com/en/za/durban/305605/daily-weather-forecast/305605?day=4&lang=en-us"
    },
    {
      "Date": "2022-09-15T07:00:00+02:00",
      "EpochDate": 1663218000,
      "Temperature": {
        "Minimum": {
          "Value": 65,
          "Unit": "F",
          "UnitType": 18
        },
        "Maximum": {
          "Value": 85,
          "Unit": "F",
          "UnitType": 18
        }
      },
      "Day": {
        "Icon": 1,
        "IconPhrase": "Sunny",
        "HasPrecipitation": false
      },
      "Night": {
        "Icon": 34,
        "IconPhrase": "Mostly clear",
        "HasPrecipitation": false
      },
      "Sources": [
        "AccuWeather"
      ],
      "MobileLink": "http://www.accuweather.com/en/za/durban/305605/daily-weather-forecast/305605?day=5&lang=en-us",
      "Link": "http://www.accuweather.com/en/za/durban/305605/daily-weather-forecast/305605?day=5&lang=en-us"
    }
  ]
}
#2
#3

I understand how to do the formatting under when the date is just provided in a unreadable format, but now the dates i have are in an array now would the best option be to make a separate array and populate it with the dates where i can then manipulate it as it goes in the array.

#4

No, just pass them to the template as is, then apply formatting using Intl.DateTimeFormat there, like

const myDateFormatter = new Intl.DateTimeFormat(undefined, { 
  my: formatting,
  options: here
});

export cost formatDate = formatter.format;

Then in the template (I can’t remember what Angular templates look/work like so this is pseudocode:

import { formatDate } from "./my-formatters.js";

....

<p>The date is {formatDate(date)}</p>

Keep everything as standard ISO format dates of whatever kind, formatting is for the front-end only so do it at last possible point