Transforming UNIX format to String format

Transforming UNIX format to String format


DronaHQ supports the conversion of UNIX format to string format in any App. While using connectors for an App to display data from the endpoint, there is a chance to run into UNIX format of date which with the help of JavaScript on DronaHQ platform can be transformed into the string format.

To understand this feature briefly let’s create a microapp on DronaHQ to display data in grid format from a GraphQL endpoint API which is connected as a connector.

Prerequisite

Knowledge of JavaScript is a big support to understand and work with JSON format of the data as well as writing and understanding queries.

Connector Configuration

The query is needed to fetch the data from the endpoint of the GraphQL API defining which data to fetch as well as how much data to fetch.

The query should be created with respect to the endpoint API used in the App, for this microapp we are using SpaceX endpoint that is: GraphiQL Explorer (SpaceX.land) and the output is based on that itself.

The query which we will put up in our connector API will be

{
  launchesPast(limit: 10) {
      mission_name
      launch_site {
            site_name_long
      }
      rocket {
           rocket_name
     }
     launch_date_unix
 }
  }

Click on Test Query or Ctrl + Enter and if the query is right, it will display status of success with code 200 and its response

Now save it.

Using Connector

Create an app on the DronaHQ Studio and place a table grid from Controls.

Click on Table > Data (side panel) > Connectors > Select Connectors.

Select your GraphQL connector from the next widow which was created earlier. Select the API created for fetching details.

Transforming Connector Responses


On the next screen, go to **Transform Response**. In this segment, we will add our JavaScript code to transform UNIX to string format according to our desired format.`Preformatted text`

The DronaHQ Studio supports many inbuilt libraries of JavaScript such as jquery.js, moment.js, underscore.js, and crypto.js We will use the moment.js to convert UNIX code.

Supported Libraries

Syntax for moment.js:

moment.unix(data_to_be_used).format(type_of_format_needed)

The JavaScript Code:

output = []; 
data.data.launchesPast.forEach(flight => { 
  output.push({ 
    misssionName : flight.mission_name, 
    rocketName : flight.rocket_name, 
    siteName : flight.launch_site.site_name_long, 
    launchDate : moment.unix(flight.launch_date_unix).format('LL') 
  }); 
}); 
data = output; 

In the above code all the details are getting fetched from the API.

An iteration on every past launch data is getting implemented where only the required details are getting saved into variables. With the help of moment.js the UNIX launch date format is converted into string format with a new key of lanuchDate from launch_date_unix .

All of these data are stored in output object and after that it is bind through JavaScript function.

To view the raw data with UNIX code format for the date, click on View raw response.

{ 
"data": { 
      "launchesPast": [ 
             { 
                    "mission_name": "Starlink-10 (v1.0) & SkySat 19-21", 
                    "launch_site": { 
                    "site_name_long": "Cape Canaveral Air Force Station Space Launch Complex 40" 
            }, 
      "rocket": { 
                   "rocket_name": "Falcon 9" 
           }, 
      "launch_date_unix": 1597761060 
     } 
   ] 
 } 
} 

Click on Test to check if the test is successful.

One can view the details of the changes and transformation of data by clicking View transformed response.

Next is to connect the connector keys from the Select columns to bind segment.

Then Test and Finish.

Once it is done, the changes will be reflected on our table grid and the UNIX code will appear demystifying in a string format.

Note: This is one of the methods to use the JavaScript code to change UNIX to string format for a connector-based application. This can also be used without using any connector and can be implemented by opting for Custom JavaScript directly during binding of data.