How to reformat date before displaying in Table

Question

I use React and axios for fetch data from: https://data.nasa.gov/resource/gh4g-9sfh.json

I fetch JSON and pass it as props to the ResultTable to render data in a Table

let formQuery =
      "https://data.nasa.gov/resource/gh4g-9sfh.json?$where=UPPER(name)like'" +
      this.convertUserInputToQuery() +
      "'";`enter code here`

    this.setState({
      loading: "loading..."
    });
    axios
      .get(formQuery)
      .then(data => {
        let searchResult = data.data;
        console.log(searchResult);
        //sets states which renders the result in the ResultTable component
        this.setState({
          searchResult: searchResult,
          loading: "search",
          pagination: { current: 1 }
        });
        console.log(this.state.pagination);
      })
      .catch(err => {
        console.log(err);
        this.setState({ searchResult: "error", loading: "search" });
      })
      .then(data => {
         this.setState({ pagination: {} });
      });
  }

i`ll render this date using Ant Design in to Table here:

import React, { Component } from "react";
import { Table } from "antd";
import "antd/dist/antd.css";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Fall",
    dataIndex: "fall",
    key: "fall"
  },
  {
    title: "Mass",
    dataIndex: "mass",
    key: "mass"
  },
  {
    title: "Year",
    dataIndex: "year",
    key: "year"
  }
];

export class ResultTable extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div id="result-output">
        {this.props.searchResult != "error" && (
          <Table
            className="result-table"
            dataSource={this.props.searchResult}
            columns={columns}
            pagination={this.props.pagination}
          />
        )}
        {this.props.searchResult == "error"}
      </div>
    );
  }
}

and have issue with extra characters in "year" column:

Screen of a rendered Table

How can I rewrite all "year" data in my fetched JSON file? So it renders without extra characters?

Answer 1

Please have a look as below:

• Please create a method for changing date format

 formatDate = (date) => { const dateObject = new Date(date); const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ]; const setMonth = `${monthNames[dateObject.getMonth()]}`; const setDay = `${dateObject.getDate()}`; const setYear = dateObject.getFullYear(); const returnDate = `${setMonth} ${setDay}, ${setYear} `; return returnDate; };

• Call the method where you are getting the data from the loop:

formatDate(year);

I hope it would help you out.

Answer 2

Use

columns[3].key = convertDate(columns[3].key);

for each row to convert your dates:

 function convertDate(inputFormat) { function pad(s) { return (s < 10) ? '0' + s : s; } var d = new Date(inputFormat) return [pad(d.getDate()), pad(d.getMonth()+1), d.getFullYear()].join('/') } console.log(convertDate(new Date()));

Answer 3

You can just iterate through the results and change the year field of every result.

axios
    .get(formQuery)
    .then(data => {
        ...
        for(let result of searchResult)
            if(result["year"]) // If result has an `year` attribute
                result["year"] = result["year"].split("T")[0] // extract "1880-01-01" from "1880-01-01T00:00:00.000"
        ...
    })

Answer 4

Here is a different approach of doing it, instead of modifying the data. Convert date before rendering.

In year column, convert it to required format before displaying. I assumed you have an option to add a new library in your project (momentjs). If not you can manually do it instead of using momentjs library. This way you can simply modify timezone in future.

You can use that converter in various parts of your application, to modify the date format instead of altering the data eveytime you get from backend

Here is sample codebox link https://codesandbox.io/s/funny-forest-96fht

import moment from "moment-timezone";

export const timeConverter = rawDate =>
  moment(rawDate)
    .tz("America/Chicago")
    .format("MMM DD YYYY, h:mm:ss a z");

...

import { timeConverter } from "./momentTz";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Fall",
    dataIndex: "fall",
    key: "fall"
  },
  {
    title: "Mass",
    dataIndex: "mass",
    key: "mass"
  },
  {
    title: "Year",
    dataIndex: "year",
    key: "year",
    render: year => timeConverter(year)
  }
];

manual way

Just use render in your existing year column to remove unwanted data

cose sample https://codesandbox.io/s/vigilant-feather-9ui01

 {
    title: "Year",
    dataIndex: "year",
    key: "year",
    render: year => year.split("T")[0] 
  }