Use moment to format response date

New to APIs/Postman
1

My question:
Having a response from our Jira with some issues.

{
“expand”: “schema,names”,
“startAt”: 0,
“maxResults”: 100,
“total”: 55,
“issues”: [
{
“expand”: “operations,versionedRepresentations,editmeta,changelog,renderedFields”,
“id”: “362734”,
“self”: “https://issues.atlassian.com/rest/api/2/issue/362734”,
“key”: “AT-4807”,
“fields”: {
“summary”: “Agile board v200.1”,
“customfield_11680”: “AT-2433”,
“assignee”: null,
“updated”: “2022-11-30T15:16:58.000+0100”,

Now I was able to build a html table with the issues information.
But i was not able to change the date format with moment.
What I want to achieve is that the updated column shows e.g. “Yesterday” or “1 day ago”

I’ve already tried:
I added

moment = require(‘moment’);
to the test and to the script section in the template - but nothing worked.
At the moment I think I have to copy the response and modify the json - but to be honest I’m not sure if it is the right way.

Thanks for your feedback :slight_smile:

2

How have you built the HTML table? (Built where?) Can you show your code?

Can you also please clarify what you are trying to do.

Are you trying to assert on whether the updated date is yesterday or 1 day ago, or do you want to change the response to show the text yesterday or x days ago instead of the actual date. (Is it always 1 day or can this be different).

If you want to change the field in the response, then you should be able to do this as long as you parse it with var instead of constant so it can be changed.

var response = pm.response.json()

I would recommend that you parse it and change the data first before you use it elsewhere. (Although I’m not really sure what you are trying to do, hence the clarification).

If it really is days ago, then the following can work this out.

var updated = "2022-11-30T15:16:58.000+0100"
console.log(updated);
var noOfDays = moment(updated, "YYYYMMDD").fromNow();
console.log(noOfDays);

image

3

Building the html table within the test tab:

var template = `

    <script defer type="text/javascript">
    moment = require('moment');
    </script>
    <table bgcolor="#FFFFFF">
        <tr>
            <th>Key</th>
            <th>Summary</th>
            <th>Estimate</th>
            <th>Remaining</th>
            <th>Assignee</th>
            <th>Updated</th>
            <th>Status</th>
            <th>Epic</th>
        </tr>

        {{#each response.issues}}
            <tr>
                <td><a href='{{key}}'>{{key}}</a></td>
                <td>{{fields.summary}}</td>
                <td>{{fields.timetracking.originalEstimate}}</td>
                <td>{{fields.timetracking.remainingEstimate}}</td>
                <td>{{fields.assignee.name}}</td>
                <td>{{fields.updated}}).startOf("hour").fromNow();</td>
                <td>{{fields.status.name}}</td>
                <td>{{fields.customfield_11680}}</td>
            </tr>
        {{/each}}
    </table>
`;

pm.visualizer.set(template, {
    response: pm.response.json()
});

The column updated now show
2022-11-30T15:16:58.000+0100

4

I haven’t played around with the visualizer.

I would probably keep the template as simple as possible and make changes to the response outside of this before its used in the visualizer.

When you set the template, instead of using pm.response.json(), you would use whatever variable you have already parsed (and updated).

It looks like you should be able to do it inline though.

Not sure you have that line correct as you haven’t told it to use moment. I suspect it’s just using the built in JavaScript manipulation of dates instead of the moment library.

Shouldn’t it be.

<td>moment({{fields.updated}}).startOf("hour").fromNow();</td>

I still can’t work out exactly what you want it to show at this point. A date, or the words x days ago.

5

Thanks for you answer - very appreciated.
I tested your suggestion but it seem it doesn’t work.

Row 1 is how it is shown now.
Row 2 is how it should be shown

Bildschirm­foto 2022-12-01 um 16.58.32
Bildschirm­foto 2022-12-01 um 16.58.321294×136 30.6 KB

6

That’s reading the field ok, but it thinks the rest of its just text.

I think that’s because it needs to be inside a scripts tag otherwise Postman will think it’s just HTML.

7

@schween

Got this to work eventually. Take a look at the following example.

This is using https://postman-echo.com/post with the following body to create some random test data. The dates will be in the ISO timestamp format.

{
	"contacts": [
		{
			"name": "{{$randomFullName}}",
			"date": "{{$randomDatePast}}"
		},
		{
			"name": "{{$randomFullName}}",
			"date": "{{$randomDatePast}}"
		},
		{
			"name": "{{$randomFullName}}",
			"date": "{{$randomDatePast}}"
		}
		]
}

The following code is in the Tests tab.

var template = `

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>

    <style type="text/css">
        .tftable {font-size:14px;color:#333333;width:100%;border-width: 1px;border-color: #87ceeb;border-collapse: collapse;}
        .tftable th {font-size:18px;background-color:#87ceeb;border-width: 1px;padding: 8px;border-style: solid;border-color: #87ceeb;text-align:left;}
        .tftable tr {background-color:#ffffff;}
        .tftable td {font-size:14px;border-width: 1px;padding: 8px;border-style: solid;border-color: #87ceeb;}
        .tftable tr:hover {background-color:#e0ffff;}
    </style>
    
    <table class="tftable" border="1">
        <tr>
            <th>Name</th>
            <th>Date</th>
        </tr>
        
        {{#each response.data.contacts}}
            <tr id=row_{{@key}} onClick="handleClick(this.id)">
                <td id=name_{{@key}}>{{name}}</td>
                <td id=date_{{@key}}>{{date}}</td>
                <script type = "text/JavaScript">
                    var d = moment("{{date}}").fromNow();
                    document.getElementById("date_{{@key}}").innerHTML = d;
                </script>
            </tr>
        {{/each}}
    </table>

`;

pm.visualizer.set(template, {
    response: pm.response.json()
});

A key concept is that you need to ID your elements in the table. They need to be unique so you can target them ByID in the script. The handlebars have a key for each row that you can use in conjunction with the header for each column to create unique ID’s.

8

Wow - thank you very much this works!