What is the best way to utilize date-fns for formatting a date retrieved from an API?

After receiving data from an API in the 'yyyy-MM-dd' format, I encountered a display issue when trying to convert it to 'dd-MM-yyyy'. How can I properly adjust the date format without disrupting the table display?

 onMounted(async () => {
    const today = startOfDay(new Date());
    const lastWeek = sub(today, { days: 7 });
    const searchParams: TableSearchParams = {
      startDate: format(lastWeek, 'yyyy-MM-dd'),
    };
    const { data } = await fetchData(searchParams);
    if (data && data.entries) {
      tableRows.value = data.entries.map((entry) => ({
        ...entry,
        lastDelivery: entry.values ? entry.values[entry.values.length - 1].date : '-',
      }));
    } else {
      tableRows.value = [];
    }
  });

Answer №1

The updated date format is being rejected by the server. If the server cannot process the new date format, it will not provide any data back. To resolve this issue, consider adjusting the date format to one that the server can recognize or modifying the server settings.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Authentication with Express, Passport, and JSON Web Token (JWT)

When trying to access the "/secret" endpoint with a valid JWT token using passport authentication, the response returns a message saying "Success! You can not see this without a token". I will test this in Postman with the following authorization credenti ...

Learn the process of uploading a file using FormData alongside multer in node js. Experience the issue of receiving undefined in req.file and { } in req.body

Is there a way to successfully upload a file using FormData along with multer in Node.js? I seem to be encountering issues as req.file shows undefined and req.body displays {}. Check out the HTML code snippet below: <input type="file" name=&q ...

Analyzing the DOM content loading time for web pages generated using AJAX technology

When analyzing website performance, I rely on window.performance.timing. However, this method falls short when it comes to measuring the performance of webpages loaded through ajax calls. For instance, websites built with frameworks like angularjs often lo ...

Backend communication functions seamlessly within the service scope, yet encounters obstacles beyond the service boundaries

I'm facing an issue with accessing data from my backend. Although the service successfully retrieves and logs the data, when I try to use that service in a different module, it either shows "undefined" or "Observable". Does anyone have any suggestions ...

Able to display the value when printing it out, however when trying to set it in setState, it becomes

Within my form, there's a function that receives the value: _onChange(ev, option) { console.log(option.key) // Value of option key is 3 this.setState({ dropdownValue:option.key }) // Attempting to set state with 'undefined' as ...

Unraveling the mysteries of this PHP-generated object

Need help with iterating over a JSON object generated by PHP code in response to a web service request. Looking for guidance on rendering sub-objects in a select list, especially those with value indexes. Can someone provide assistance on populating a sel ...

Guide on keeping your MongoDB collection up-to-date with Mongoose

I'm currently facing an issue while working on a project. My goal is to build a MongoDB database where I can store dates and YouTube video links. I've chosen to use Mongoose as my ORM. The problem I'm encountering is that while I can create ...

What is the best way to link an image in a React Component NPM module?

I have developed a date picker component in React and I'm currently working on uploading it to NPM. The component utilizes an external SVG file, but I am encountering issues with referencing that SVG file properly. Here's the structure of my fil ...

Issue with RegisterClientScriptCode function following a partial postback

In a SharePoint website, the code below is contained within a user control: ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "jquery144", "<script type=\"text/javascript\" src=\"/_layouts/Unicre.Web.RUOnline.Controlos/Script ...

React cannot be utilized directly within HTML code

I am looking to incorporate React directly into my HTML without the need for setting up a dedicated React environment. While I can see the test suite in the browser, my React app fails to load. Below is the content of my script.js file: I have commented ...

The A-Frame buffer geometry merger may cause unexpected entity shifts under certain circumstances

My A-Frame scene has a simple issue with the buffer-geometry-merger component. It works perfectly fine when entities are written in static HTML, but not when injected into the DOM using an A-Frame component. It seems like the geometry gets shifted, as if t ...

The Vue js post request encountered an issue due to the absence of the CSRF token

When attempting to make a post request, an error message indicates that the CSRF token is missing. I am using Vue.js and DRF - how can I properly pass the CSRF token in Vue? function(){ this.loading = true; this.$http.post('/get_books/&apos ...

Troubleshooting Vue 3 component rendering issues in Laravel 8

My setup includes a basic blade file with a component embedded within: <section> <h1>Carousel</h1> <carousel :slides="@json($data->slides)"> </carousel> This is how the component is structured: <templa ...

Why does my jQuery code target all the text values?

Looking to grab a specific table cell number and multiply it by an input value on focusout, but having trouble with the selector grabbing all cells with "front" in the name. Check out the code below: jquery $(document).ready(function(){ $(".percent") ...

The presence of asynchronous JavaScript can lead to errors due to missing functions in JavaScript

I've encountered an issue with a jQuery script that I modified by adding an ASYNC attribute. Surprisingly, it functions correctly in Firefox but encounters intermittent failures in both Chrome and IE browsers. Here's the PHP code snippet respons ...

Expanding rows in Angular UI-Grid: Enhancing user experience with hover functionality

Struggling to add a hover effect to the rows in an Angular UI grid. The goal is for the entire row to change background color when hovered over, but with an expandable grid that includes a row header, applying CSS rules only affects either the row header o ...

Looking to utilize vue.js to alter the color of the <li> element when a select option is chosen

I'm a beginner in vue.js and I'm attempting to change the background color by using the select option. Despite trying the cueCardsColor method, nothing seems to be happening. <ul> <li :class="+ cueCardColor"> <sele ...

Where should I place an object on an NFT marker using A-Frame and AR.JS?

Struggling to find a solution for aligning the video element correctly within the NFT marker area after exploring AR.JS and AFRAME documentation without success. The issue: The positioning of the video varies on different devices with varying screen and c ...

How to insert a row above the header in an Excel sheet using JavaScript within

i am using excel js to export json data to excel. The json data is successfully exported to the sheet, but now I need to add a row that provides details of the sheet above the header text. for more details please refer image the code is shown below: i ...

What are some effective design principles for creating REST APIs in expressjs?

To streamline my code organization, I made the decision to create a methods folder. Within this folder, I store individual JavaScript files for each URL endpoint (such as website.com/billings). //expressJS configuration... const billings = require('. ...