Rendering data from a form and using it with an API

Question

I've following several articles about taking data from a HTML form and using it with an API, but despite all of this research, I'm unable to put it into practice. This is the SO post that I'm using as a start off point

For now, I simply want to take data from a HTML form, use it with an API call and console.log it results (just so I know that it's working).

My Express set up and HTML form are both below:

Express

var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var request = require("request");

app.use(bodyParser.urlencoded({extended: true}));
app.set("view engine", "ejs");

app.use(express.static(__dirname + '/public'));

const apiUrl = "https://api.darksky.net/forecast/"; 
const apiKey = "XXX";

app.get("/", function(req, res){
    res.render("index");
});

app.post('/results', function(req, res){
    var lat = req.body.latitude;
    var long = req.body.longitude;
    request(apiUrl + apiKey + "/" + long + "," + lat, function(error, response, body){
        if (!error && response.statusCode == 200) {
            var parsedData = JSON.parse(body);
            console.log(parsedData.currently.summary + " " + parsedData.currently.temperature);
        }
    });
});

app.listen(3000, function(){
    console.log("Server has started");
})

HTML

<form action = "/results" method ="POST">
    <ul>
        <li>
            <label for = "latitude">Latitude</label>
            <input type="text" name="latitude" placeholder="e.g. 19.4326">
        </li>
        <li>
            <label for = "longitude">Longitude</label>
            <input type="text" name="longitude" placeholder="e.g. 99.1332">
        </li>
    </ul>
    <button type="submit">Get the weather</button>
</form>

To make sure the API is working, I used the code below and it returns clear 68.16:

var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var request = require("request");

app.use(bodyParser.urlencoded({extended: true}));
app.set("view engine", "ejs");

app.use(express.static(__dirname + '/public'));

const apiUrl = "https://api.darksky.net/forecast/"; 
const apiKey = "XXX";
var lat = 23;
var long = 23;

app.get("/", function(req, res){
    res.render("index");
});

request(apiUrl + apiKey + "/" + long + "," + lat, function(error, response, body){
    if (!error && response.statusCode == 200) {
        var parsedData = JSON.parse(body);
        console.log(parsedData.currently.summary + " " + parsedData.currently.temperature);
    }
});

app.listen(3000, function(){
    console.log("Server has started");
})

You are posting to `/` in your form while your Express POST route is setup for `/post`. — Zachary Bennett, Feb 17 '19 at 12:42
@ZacharyBennett, doesn't look like it, there's no `/post` in the routes. — Samuel, Feb 17 '19 at 12:44
@Samuel, nope, nothing at all. I added in a simple `console.log("test")' after the `if` statement to be sure, and that's not being logged. — FeelingLikeAJabroni, Feb 17 '19 at 12:49
@ZacharyBennett I've just updated my code and created a `results.ejs` files to redirect to after submitting the form. Nothing happens and nothing is logged to the console. — FeelingLikeAJabroni, Feb 17 '19 at 12:52
Is your app running? Can you see the `Server has started` on the terminal? — Samuel, Feb 17 '19 at 12:55
Can you confirm that you're actually making the request to darksky? Maybe try stepping through your code and seeing if you actually reach the `request` function. — Zachary Bennett, Feb 17 '19 at 12:56
@ZacharyBennett, yep, it's working. I've included the code to show that it does. — FeelingLikeAJabroni, Feb 17 '19 at 13:04

score 2 · Accepted Answer · answered Feb 17 '19 at 13:08

2

There might be an error with your request to API server. Add an else block to request to see what the server has returned.

request(apiUrl + apiKey + "/" + long + "," + lat, function(error, response, body){
if (!error && response.statusCode == 200) {
    var parsedData = JSON.parse(body);
    console.log(parsedData.currently.summary + " " + parsedData.currently.temperature);
}
else{
  console.log(response.body)
}

Also, it's good practice to end the cycle, for example with res.send

answered Feb 17 '19 at 13:08

Samuel

612
2
9
25

Hey man, that worked. Thanks. Before I accept the answer, could you tell me why that worked? It's not loading the results.ejs view, but the weather is being logged to the console. – FeelingLikeAJabroni Feb 17 '19 at 13:16
Just like I mentioned on the last line of my answer it's because you didn't add code for redirection, something like `res.redirect` or `res.render` – Samuel Feb 17 '19 at 13:18
Sorry man, I understand that. But I wanted to know why it worked with `console.log(response.body)`? – FeelingLikeAJabroni Feb 17 '19 at 16:30
`response` in the `else` block is the same as `(error, response, body)` and according to `request` documentation, the property that has the server results is `body`. Your `if` condition failed, so you needed to have an `else` clause. – Samuel Feb 17 '19 at 16:42

Rendering data from a form and using it with an API

1 Answers1