Displaying an HTTP Response on a Web Page

In the previous tutorial example, we geocoded an address to identify the latitude and longitude of the location, found the current weather for that location, then displayed the result on the debug tab.

In this tutorial, we perform a similar operation but alter the existing flow to display the response on a web page using the http and http request nodes.

 

Using the HTTP and HTTP Request Nodes

 

1.Delete the inject and debug nodes.
You are left with the Geocode telogis api node, First Result function node, and Weather http request node.
2.Add and connect the new nodes you need for the tutorial:
a.From the web section of the nodes palette, click and drag the http node onto the central sheet, and place it to the left of the Geocode telogis api node.
b.Connect the http node's output to the Geocode telogis api node's input: click the gray square on the http node and drag the line to connect to the Geocode telogis api node.
c.From the logic section of the nodes palette, click and drag the change node onto the central sheet, and place it to the right of the Weather http request node.
d.Connect the output of the Weather http request node to the input of the change node.
e.From the advanced section of the nodes palette, click an drag the template node onto the central sheet, and place it to the right of the change node.
f.Connect the output of the change node to the input of the template node.
g.From the web section of the nodes palette, click and drag the http response node onto the central sheet, and place it to the right of the template node.
h.Connect the output of the template node to the input of the http response node.
3.Edit the Geocode telogis api node:
a.Double-click the telogis api node to open the Edit telogis-api node dialog box.
b.For the address parameter value, remove msg.payload and enter 20 Enterprise, Aliso Viejo.
We have to supply the street address directly within the node now, because we removed the inject node in step 1.
4.Edit the http node:
a.Double-click the http node to open the Edit http in node dialog box.
b.In the URL field, enter /WeatherNow.
c.Click Done.
5.Edit the First Result function node:
a.Double-click the function node to open the Edit function node dialog box.
b.In the Function text field, replace the text there with the following:
 

var temp = msg.payload[0];
msg.geocode = temp;
msg.payload = temp;
return msg;

 

c.Click Done.
6.Edit the Weather http request node:
a.Double-click the the Weather http request node to open the Edit http request node dialog box.
b.Replace the URL field contents with the following. Remember to replace <your_api_key> with the API Key provided to you when you created your darksky.net/dev account.
https://api.darksky.net/forecast/<your_api_key>/{{{payload.lat}}},{{{payload.lon}}}
This URL is similar to the one we used previously, but it prepends payload to the lat and lon fields.
c.Click Done.
7.Edit the change node:
a.Double-click the change node to open the Edit change node dialog box.
Tip: If you need help identifying which node is which, select the node, then look at the Type field on the info tab: it lists the node type.
b.Under the Rules section, click the drop-down menu and select "Delete".
c.In the msg. field, enter headers.
d.Click Done.
8.Edit the template node:
a.Double-click the template node to open the Edit template node dialog box.
b.Replace the contents of the Template text box with the following:
 

<div style="text-align: center;font-family: sans-serif;">
    <h1>Weather Today</h1>
    <p><em>Location:</em> {{geocode.street}}, {{geocode.city}}</p>
    <p><em>Current:</em> {{payload.currently.temperature}}&deg; F</p>
    <p><em>Description:</em> {{payload.currently.summary}}</p>
</div>

 

c.Click Done.
9.From the Flow Editor, click the Deploy button in the upper right corner of the screen.
10. View the results on a webpage:
a.Open a new browser window.
b.Navigate to the flow's URL, including its unique ID, and add /WeatherNow to the end of the URL. For example:
https://abcde123-456f-4e0e-9abc-ab2cd7321881.flows.telogis.com/weathernow
When the page loads, the current weather conditions and temperature at the geocoded location are displayed.

Source Code

 
The flow created in this tutorial is described by the JSON below. To successfully execute this flow, you must edit the tde rest node Config to add your own TDE credentials before you deploy.

To import a flow into the Editor, copy the code provided, click the upper right ≡ Menu button, then select "Import" > "Clipboard". Paste the code in the Import nodes window, then click Import.

 

Code:

[

    {

        "id": "a817dceb.b68dc",

        "type": "telogis-api",

        "z": "dc0465a8.949678",

        "name": "Geocode",

        "config": "fe8073e7.97922",

        "endpointQueryString": "endpoint=/geocode/{{country}}/{{address}}&method=get",

        "parameters": [

            {

                "name": "country",

                "value": "USA",

                "in": "path"

            },

            {

                "name": "address",

                "value": "20 Enterprise, Aliso Viejo",

                "in": "path"

            }

        ],

        "x": 340,

        "y": 80,

        "wires": [

            [

                "329d76db.6686ea"

            ]

        ]

    },

    {

        "id": "329d76db.6686ea",

        "type": "function",

        "z": "dc0465a8.949678",

        "name": "First Result",

        "func": "var temp = msg.payload[0];\nmsg.geocode = temp;\nmsg.payload = temp;\nreturn msg;",

        "outputs": 1,

        "noerr": 0,

        "x": 510,

        "y": 80,

        "wires": [

            [

                "1688e6fb.bda109"

            ]

        ]

    },

    {

        "id": "1688e6fb.bda109",

        "type": "http request",

        "z": "dc0465a8.949678",

        "name": "Weather",

        "method": "GET",

        "ret": "obj",

        "url": "https://api.darksky.net/forecast/c86b0fbbac42edf4850112cc77c0c890/{{{payload.lat}}},{{{payload.lon}}}",

        "x": 680,

        "y": 80,

        "wires": [

            [

                "140cf413.dfe6cc"

            ]

        ]

    },

    {

        "id": "1e665dda.b64ae2",

        "type": "http in",

        "z": "dc0465a8.949678",

        "name": "",

        "url": "/WeatherNow",

        "method": "get",

        "x": 150,

        "y": 80,

        "wires": [

            [

                "a817dceb.b68dc"

            ]

        ]

    },

    {

        "id": "140cf413.dfe6cc",

        "type": "change",

        "z": "dc0465a8.949678",

        "name": "",

        "rules": [

            {

                "t": "delete",

                "p": "headers",

                "pt": "msg"

            }

        ],

        "action": "",

        "property": "",

        "from": "",

        "to": "",

        "reg": false,

        "x": 880,

        "y": 80,

        "wires": [

            [

                "2bd527e2.eec348"

            ]

        ]

    },

    {

        "id": "2bd527e2.eec348",

        "type": "template",

        "z": "dc0465a8.949678",

        "name": "Webpage",

        "field": "payload",

        "fieldType": "msg",

        "format": "html",

        "syntax": "mustache",

        "template": "<div style=\"text-align: center;font-family: sans-serif;\">\n    <h1>Weather Today</h1>\n    <p><em>Location:</em> {{geocode.street}}, {{geocode.city}}</p>\n    <p><em>Current:</em> {{payload.currently.temperature}}&deg; F</p>\n    <p><em>Description:</em> {{payload.currently.summary}}</p>\n</div>\n",

        "x": 1070,

        "y": 80,

        "wires": [

            [

                "6f0785bc.7f318c"

            ]

        ]

    },

    {

        "id": "6f0785bc.7f318c",

        "type": "http response",

        "z": "dc0465a8.949678",

        "name": "",

        "x": 1210,

        "y": 80,

        "wires": []

    },

    {

        "id": "fe8073e7.97922",

        "type": "api-config",

        "z": "dc0465a8.949678",

        "proxy": "",

        "instance": "production",

        "custominstance": "https://api.telogis.com/",

        "labelValue": "production - acme123:main",

        "useMessageCredentials": "false",

        "credentialsCustomer": "acme123",

        "credentialsUser": "main"

    }

]