title: How do I format the DATETIME format in an api call from mySQL?
body: <p>Frontend code:</p>
  <pre><code>import React, { Component, useState, useEffect } from &quot;react&quot;;
  import Navbar from &quot;../Navbar/Navbar.js&quot;;
  import BarChart from &quot;../BarChart/BarChart&quot;;
  import {
    Chart,
    Tooltip,
    CategoryScale,
    LinearScale,
    Title,
    LineController,
    LineElement,
    PointElement,
  } from &quot;chart.js&quot;;
  import Card from &quot;../Card/Card.js&quot;;
  import CardHeader from &quot;../Card/CardHeader.js&quot;;
  import CardIcon from &quot;../Card/CardIcon.js&quot;;
  import CardBody from &quot;../Card/CardBody&quot;;
  import CardFooter from &quot;../Card/CardFooter&quot;;
  import GridItem from &quot;../Grid/GridItem.js&quot;;
  import GridContainer from &quot;../Grid/GridContainer.js&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import Table from &quot;../Table/Table&quot;;
  import Icon from &quot;@material-ui/core/Icon&quot;;
  import Danger from &quot;../Typography/Danger.js&quot;;
  import Warning from &quot;@material-ui/icons/Warning&quot;;
  import DateRange from &quot;@material-ui/icons/DateRange&quot;;
  import Update from &quot;@material-ui/icons/Update&quot;;
  import Store from &quot;@material-ui/icons/Store&quot;;
  import LocalOffer from &quot;@material-ui/icons/LocalOffer&quot;;
  import Accessibility from &quot;@material-ui/icons/Accessibility&quot;;
  // import { Icon, InlineIcon } from '@iconify/react';
  import contentCopy from &quot;@iconify-icons/mdi/content-copy&quot;;
  import styles from &quot;../../assets/jss/material-dashboard/views/dashboardStyle.js&quot;;
  
  import Map from &quot;../Map/map&quot;;
  
  import Axios from &quot;axios&quot;; //axios library to make requests to api
  import &quot;./Home.css&quot;;
  import ReactPaginate from &quot;react-paginate&quot;;
  import ReactExport from &quot;react-data-export&quot;;
  
  const ExcelFile = ReactExport.ExcelFile;
  const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
  
  Chart.register(
    Tooltip,
    CategoryScale,
    LinearScale,
    Title,
    LineController,
    LineElement,
    PointElement
  );
  
  function Home(props) {
    //make an axios request to get intents data from database
    const [intentsList, setintentsList] = useState([]);
    useEffect(() =&gt; {
      Axios.get(&quot;http://localhost:3001/intents&quot;).then((response) =&gt; {
        setintentsList(response.data);
      });
    }, []);
  
    const [customerList, setCustomerList] = useState([]); //store all that information of the database in a list
    //make an axios request to get information from database
    useEffect(() =&gt; {
      Axios.get(&quot;http://localhost:3001/customers&quot;).then((response) =&gt; {
        setCustomerList(response.data);
      });
    }, []);
  
    const updateCustomerContacted = (ID) =&gt; {
      Axios.put(&quot;http://localhost:3001/update&quot;, {
        contacted: newContacted,
        ID: ID,
      }).then((response) =&gt; {
        setCustomerList(
          customerList.map((val) =&gt; {
            const dateStr = new Date(val.latest_time_of_visit).toLocaleDateString(
              &quot;en-CA&quot;
            );
            const timeStr = new Date(
              val.latest_time_of_visit
            ).toLocaleTimeString();
            const dateTime = `${dateStr} ${timeStr}`;
  
            return val.ID == ID
              ? {
                  ID: val.ID,
                  name: val.name,
                  email: val.email,
                  counts_of_visit: val.counts_of_visit,
                  latest_time_of_visit: dateTime,
                  contacted: newContacted,
                }
              : val;
          })
        );
      });
    };
  
    //delete function
    const deleteCustomer = (ID) =&gt; {
      Axios.delete(`http://localhost:3001/stats/delete/${ID}`).then(
        (response) =&gt; {
          setCustomerList(
            customerList.filter((val) =&gt; {
              return val.ID != ID;
            })
          );
        }
      );
    };
  
    //pagination
    const [pageNumber, setPageNumber] = useState(0);
    const customersPerPage = 5; //change this number according to desired number of rows in a page
    const pagesVisited = pageNumber * customersPerPage;
    const displayCustomers = customerList
      .slice(pagesVisited, pagesVisited + customersPerPage)
      .map((val, key) =&gt; {
        const dateStr = new Date(val.latest_time_of_visit).toLocaleDateString(
          &quot;en-CA&quot;
        );
        const timeStr = new Date(val.latest_time_of_visit).toLocaleTimeString();
        const dateTime = `${dateStr} ${timeStr}`;
        return (
          &lt;tr&gt;
            &lt;td&gt;{val.name}&lt;/td&gt;
            &lt;td&gt;{val.email}&lt;/td&gt;
            &lt;td&gt;{val.counts_of_visit}&lt;/td&gt;
            &lt;td&gt;{dateTime}&lt;/td&gt;
            &lt;td&gt;{val.contacted}&lt;/td&gt;
            &lt;td&gt;
              &lt;select
                onChange={(event) =&gt; {
                  setNewContacted(event.target.value);
                }}
              &gt;
                &lt;option value=&quot;&quot; selected disabled hidden&gt;
                  Select Yes/No
                &lt;/option&gt;
                &lt;option value=&quot;Yes&quot;&gt;Yes&lt;/option&gt;
                &lt;option value=&quot;No&quot;&gt;No&lt;/option&gt;
              &lt;/select&gt;
              &lt;button
                className=&quot;btn btn-primary&quot;
                onClick={() =&gt; {
                  updateCustomerContacted(val.ID);
                }}
              &gt;
                Update
              &lt;/button&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;button
                className=&quot;btn btn-danger&quot;
                onClick={() =&gt; {
                  deleteCustomer(val.ID);
                }}
              &gt;
                Delete
              &lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        );
      });
    //to account for the fact that total number of customers cannot be divided equally among the pages
    const pageCount = Math.ceil(customerList.length / customersPerPage);
    //page change
    const changePage = ({ selected }) =&gt; {
      setPageNumber(selected);
    };
  
    //update contacted column
    const [newContacted, setNewContacted] = useState(0);
  
    {
      /*}
        const [currentTime, setCurrentTime] = useState(1);
      
        useEffect(() =&gt; {
          fetch(&quot;/time&quot;)
            .then((res) =&gt; res.json())
            .then((data) =&gt; {
              setCurrentTime(data.time);
            });
        }, []);
      */
    }
  
    //export to csv function
  
    const DataSet = [
      {
        columns: [
          {
            title: &quot;S/N&quot;,
            style: { font: { sz: &quot;18&quot;, bold: true } },
            width: { wpx: 100 },
          }, // width in pixels
          {
            title: &quot;Customer Information&quot;,
            style: { font: { sz: &quot;18&quot;, bold: true } },
            width: { wpx: 250 },
          }, // width in pixels
          {
            title: &quot;Customer Email&quot;,
            style: { font: { sz: &quot;18&quot;, bold: true } },
            width: { wpx: 250 },
          }, // width in pixels
          {
            title: &quot;Counts of Visit&quot;,
            style: { font: { sz: &quot;18&quot;, bold: true } },
            width: { wpx: 175 },
          }, // width in pixels
          {
            title: &quot;Latest Time of Visit&quot;,
            style: { font: { sz: &quot;18&quot;, bold: true } },
            width: { wpx: 250 },
          }, // width in pixels
          {
            title: &quot;Contacted?&quot;,
            style: { font: { sz: &quot;18&quot;, bold: true } },
            width: { wpx: 250 },
          }, // width in pixels
        ],
        data: customerList.map((val) =&gt; [
          { value: val.ID, style: { font: { sz: &quot;14&quot; } } },
          { value: val.name, style: { font: { sz: &quot;14&quot; } } },
          { value: val.email, style: { font: { sz: &quot;14&quot; } } },
          { value: val.counts_of_visit, style: { font: { sz: &quot;14&quot; } } },
          { value: val.latest_time_of_visit, style: { font: { sz: &quot;14&quot; } } },
          { value: val.contacted, style: { font: { sz: &quot;14&quot; } } },
        ]),
      },
    ];
  
    const useStyles = makeStyles(styles);
    const classes = useStyles;
  
    return (
      &lt;div&gt;
        &lt;Navbar /&gt;
        &lt;GridContainer&gt;
          &lt;GridItem xs={12} sm={6} md={6}&gt;
            {&quot; &quot;}
            {/*width for different screen sizes*/}
            &lt;Card&gt;
              &lt;CardHeader color=&quot;warning&quot; stats icon&gt;
                &lt;CardIcon color=&quot;danger&quot;&gt;
                  &lt;h4 className={classes.cardTitleWhite}&gt;Product Statistics&lt;/h4&gt;
                  {/* &lt;Icon&gt;content_copy&lt;/Icon&gt; */}
                &lt;/CardIcon&gt;
                &lt;p className={classes.cardCategory}&gt;Used Space&lt;/p&gt;
                &lt;h3 className={classes.cardTitle}&gt;
                  49/50 &lt;small&gt;GB&lt;/small&gt;
                &lt;/h3&gt;
              &lt;/CardHeader&gt;
              &lt;CardBody&gt;
                &lt;BarChart /&gt;
              &lt;/CardBody&gt;
              &lt;CardFooter stats&gt;
                &lt;div className={classes.stats}&gt;
                  &lt;Danger&gt;
                    &lt;Warning /&gt;
                  &lt;/Danger&gt;
                  &lt;a href=&quot;#pablo&quot; onClick={(e) =&gt; e.preventDefault()}&gt;&lt;/a&gt;
                &lt;/div&gt;
              &lt;/CardFooter&gt;
            &lt;/Card&gt;
          &lt;/GridItem&gt;
          &lt;GridItem xs={12} sm={6} md={6}&gt;
            &lt;Card&gt;
              &lt;CardHeader color=&quot;dark&quot; stats icon&gt;
                &lt;CardIcon color=&quot;dark&quot;&gt;
                  {/* &lt;Store /&gt; */}
                  &lt;h4 className={classes.cardTitleWhite}&gt;Locations&lt;/h4&gt;
                &lt;/CardIcon&gt;
  
                &lt;p className={classes.cardCategory}&gt;Revenue&lt;/p&gt;
                &lt;h3 className={classes.cardTitle}&gt;$34,245&lt;/h3&gt;
              &lt;/CardHeader&gt;
              &lt;CardBody&gt;
                &lt;Map /&gt;
              &lt;/CardBody&gt;
              &lt;CardFooter stats&gt;
                &lt;div className={classes.stats}&gt;
                  &lt;DateRange /&gt;
                &lt;/div&gt;
              &lt;/CardFooter&gt;
            &lt;/Card&gt;
          &lt;/GridItem&gt;
          {/* &lt;GridItem xs={12} sm={6} md={6}&gt;
                      &lt;Card&gt;
                          &lt;CardHeader color=&quot;danger&quot; stats icon&gt;
                          &lt;CardIcon color=&quot;danger&quot;&gt;
                              &lt;Icon&gt;info_outline&lt;/Icon&gt;
                          &lt;/CardIcon&gt;
                          &lt;p className={classes.cardCategory}&gt;Fixed Issues&lt;/p&gt;
                          &lt;h3 className={classes.cardTitle}&gt;75&lt;/h3&gt;
                          &lt;/CardHeader&gt;
                          &lt;CardFooter stats&gt;
                          &lt;div className={classes.stats}&gt;
                              &lt;LocalOffer /&gt;
                              
                          &lt;/div&gt;
                          &lt;/CardFooter&gt;
                      &lt;/Card&gt;
                      &lt;/GridItem&gt;
                      &lt;GridItem xs={12} sm={6} md={6}&gt;
                      &lt;Card&gt;
                          &lt;CardHeader color=&quot;info&quot; stats icon&gt;
                          &lt;CardIcon color=&quot;info&quot;&gt;
                              &lt;Accessibility /&gt;
                          &lt;/CardIcon&gt;
                          &lt;p className={classes.cardCategory}&gt;Followers&lt;/p&gt;
                          &lt;h3 className={classes.cardTitle}&gt;+245&lt;/h3&gt;
                          &lt;/CardHeader&gt;
                          &lt;CardFooter stats&gt;
                          &lt;div className={classes.stats}&gt;
                              &lt;Update /&gt;
                             
                          &lt;/div&gt;
                          &lt;/CardFooter&gt;
                      &lt;/Card&gt;
                      &lt;/GridItem&gt; */}
        &lt;/GridContainer&gt;
  
        &lt;GridContainer&gt;
          &lt;GridItem xs={12} sm={12} md={12}&gt;
            &lt;Card&gt;
              &lt;CardHeader color=&quot;warning&quot;&gt;
                &lt;h4 className={classes.cardTitleWhite}&gt;Customer Information&lt;/h4&gt;
                {/*}
                &lt;p className={classes.cardCategoryWhite}&gt;
                  Visitors since 16th May, 2021
                &lt;/p&gt;
                  */}
              &lt;/CardHeader&gt;
              &lt;CardBody&gt;
                &lt;div className=&quot;dashboardcontainer&quot;&gt;
                  &lt;div className=&quot;container&quot;&gt;&lt;/div&gt;
                  &lt;table className=&quot;customertable&quot;&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;Customer Name&lt;/th&gt;
                        &lt;th&gt;Customer Email&lt;/th&gt;
                        &lt;th&gt;Counts of Visit&lt;/th&gt;
                        &lt;th&gt;Latest Time of Visit&lt;/th&gt;
                        &lt;th&gt;Contacted?&lt;/th&gt;
                        &lt;th&gt;Edit Contacted&lt;/th&gt;
                        &lt;th&gt;Action&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;{displayCustomers}&lt;/tbody&gt;
                  &lt;/table&gt;
                  &lt;ReactPaginate
                    previousLabel={&quot;Previous&quot;}
                    nextLabel={&quot;Next&quot;}
                    pageCount={pageCount}
                    onPageChange={changePage}
                    containerClassName={&quot;paginationBttns&quot;}
                    pageLinkClassName={&quot;paginationNumber&quot;}
                    previousLinkClassName={&quot;previousBttn&quot;}
                    nextLinkClassName={&quot;nextBttn&quot;}
                    disabledClassName={&quot;paginationDisabled&quot;}
                    activeClassName={&quot;paginationActive&quot;}
                  /&gt;
                  &lt;ExcelFile
                    filename=&quot;Customer Information&quot;
                    element={
                      &lt;button
                        type=&quot;button&quot;
                        className=&quot;btn btn-success float-right m-3&quot;
                      &gt;
                        Export to CSV
                      &lt;/button&gt;
                    }
                  &gt;
                    &lt;ExcelSheet
                      dataSet={DataSet}
                      name=&quot;Customer Information Report&quot;
                    &gt;&lt;/ExcelSheet&gt;
                  &lt;/ExcelFile&gt;
                &lt;/div&gt;
                {/*}
                &lt;Table
                  tableHeaderColor=&quot;warning&quot;
                  tableHead={[&quot;ID&quot;, &quot;Name&quot;, &quot;Salary&quot;, &quot;Country&quot;]}
                  tableData={[
                    [&quot;1&quot;, &quot;Dakota Rice&quot;, &quot;$36,738&quot;, &quot;Niger&quot;],
                    [&quot;2&quot;, &quot;Minerva Hooper&quot;, &quot;$23,789&quot;, &quot;Curaçao&quot;],
                    [&quot;3&quot;, &quot;Sage Rodriguez&quot;, &quot;$56,142&quot;, &quot;Netherlands&quot;],
                    [&quot;4&quot;, &quot;Philip Chaney&quot;, &quot;$38,735&quot;, &quot;Korea, South&quot;],
                  ]}
                /&gt;
              */}
              &lt;/CardBody&gt;
            &lt;/Card&gt;
          &lt;/GridItem&gt;
        &lt;/GridContainer&gt;
      &lt;/div&gt;
    );
  }
  
  export default Home;
  
  </code></pre>
  <p>Backend code:</p>
  <pre><code>//set up express server
  const express = require(&quot;express&quot;);
  const app = express();
  //set up sql server
  const mysql = require(&quot;mysql&quot;);
  const cors = require(&quot;cors&quot;);
  
  app.use(cors());
  app.use(express.json());
  //create a variable called db to make your SQL Statements
  const db = mysql.createConnection({
    user: &quot;&quot;,
    host: &quot;&quot;,
    password: &quot;&quot;,
    database: &quot;&quot;,
  });
  
  //GET REQUEST to database to retrieve customers information from database
  app.get(&quot;/customers&quot;, (req, res) =&gt; {
    db.query(&quot;SELECT * FROM customer_info&quot;, (err, result) =&gt; {
      if (err) {
        console.log(err);
      } else {
        let row,
          res = [];
        console.log(result);
        for (let i = 0; i &lt; result.length; i++) {
          row = result[i];
  
          let tmpd = row.latest_time_of_visit.replace(&quot;Z&quot;, &quot;&quot;).split(&quot;T&quot;);
          let tmpt = tmpd[1].split(&quot;:&quot;);
          // check for meridian
          let meridian = &quot;AM&quot;;
          if (+tmpt[0] &gt; 12) {
            tmpt[0] = +tmpt[0] - 12;
            meridian = &quot;PM&quot;;
            tmpt[0] = tmpt[0] &lt; 10 &amp;&amp; &quot;0&quot; + tmpt[0];
          }
          row.latest_time_of_visit =
            tmpd[0] + &quot; &quot; + tmpt.join(&quot;:&quot;) + &quot; &quot; + merdian;
          res.push(row);
        }
  
        res.send(res);
      }
    });
  });
  
  //Update customers
  app.put(&quot;/update&quot;, (req, res) =&gt; {
    const ID = req.body.ID;
    const contacted = req.body.contacted;
  
    db.query(
      &quot;UPDATE customer_info SET contacted = ? WHERE ID = ?&quot;,
      [contacted, ID],
      (err, result) =&gt; {
        if (err) {
          console.log(err);
        } else {
          res.send(result);
        }
      }
    );
  });
  
  //Delete customers
  app.delete(&quot;/stats/delete/:ID&quot;, (req, res) =&gt; {
    const ID = req.params.ID;
  
    db.query(&quot;DELETE FROM customer_info WHERE ID = ?&quot;, ID, (err, result) =&gt; {
      if (err) {
        console.log(err);
      } else {
        res.send(result);
      }
    });
  });
  
  //api call to pull intents data
  app.get(&quot;/intents&quot;, (req, res) =&gt; {
    db.query(&quot;SELECT * FROM data_analytics&quot;, (err, result) =&gt; {
      if (err) {
        console.log(err);
      } else {
        res.send(result);
      }
    });
  });
  
  //check if backend server is running
  app.listen(3001, () =&gt; {
    console.log(&quot;Your server is running on port 3001&quot;);
  });
  
  </code></pre>
  <p>Drawing reference to above front end and back end code, how can I change my code such that in my api endpoint localhost:3001/customers it shows
  {&quot;ID&quot;:1,&quot;name&quot;:&quot;Ali&quot;,&quot;email&quot;:&quot;Ali@gmail.com&quot;,&quot;counts_of_visit&quot;:5,&quot;latest_time_of_visit&quot;:&quot; 2021-05-10 08:01:02&quot;,&quot;contacted&quot;:&quot;Yes&quot;},</p>
  <p>instead of:
  {&quot;ID&quot;:1,&quot;name&quot;:&quot;Ali&quot;,&quot;email&quot;:&quot;Ali@gmail.com&quot;,&quot;counts_of_visit&quot;:5,&quot;latest_time_of_visit&quot;:&quot;2021-05-10T00:01:02.000Z&quot;,&quot;contacted&quot;:&quot;Yes&quot;},</p>
  <p>Right now there is a change from mysql database do api.</p>