How to send data from Node.js server to HTML document?

Question

I want to send data that I get from an API to the HTML page from the server on Node.js. Below is my code for Node.js;

const express = require("express");

const app = express();

const https = require("https");
const bodyparser = require("body-parser");


app.use(express.static("public"));
app.use(bodyparser.urlencoded({
  extended: true
}));



//getting request from browers so sending response
app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});


//on getting the post req
app.post("/", function(req, res) {

  const query = req.body.query;
  const appid = "//appid";
  const units = "metric";
  const url = "https://api.openweathermap.org/data/2.5/weather?q=" + query + "&appid=" + appid + "&units=" + units

  https.get(url, function(respond) {

    console.log(respond.statusCode);
    respond.on("data", function(data) {


      const weatherdata = JSON.parse(data)
      console.log(weatherdata);
      const tempe = weatherdata.main.temp;
      const des = weatherdata.weather[0].description;


        res.sendFile(__dirname+"/output");


    });
  });
});




app.listen(8085, function() {

  console.log("server started at port 3000");

});

Here's my code for the output.html to which I want to send data


    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Weather Report</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

        <style>
          .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
          }

          @media (min-width: 768px) {
            .bd-placeholder-img-lg {
              font-size: 3.5rem;
            }
          }
        </style>



  </head>
  <body class="text-center">
    <section class=" form-signin">
      <div class="headingdiv">
           <form class="form" action="/output" method="get">
              <h1 id="Temperature" name="tem">Tempe here</h1>
                  <p class="mt-5 mb-3 text-muted">&copy; 2020</p>

           </form>
      </div>
    </section>

  </body>
</html>

I have used a Weather API which sends data and I want to show that data to a new HTML document.

@jonrsharpe hi , the user requests from bowser and when i received the request the i have sent the main page which is index.html the data feeders into index.html is taken and sent to API request and took response now i want to send that response to output .HTML as a feedback to the users request — SRIDHARAM SRIKANTH
– SRIDHARAM SRIKANTH, Commented May 17, 2020 at 18:06
This isn't a chat; please take the tour and review How to Ask. — jonrsharpe
– jonrsharpe, Commented May 17, 2020 at 18:08

fazlu · Accepted Answer · 2020-05-17 18:15:11Z

0

You need to use ejs or jade template system to fill data into html file and then send it to user in response. For your reference, here's a link

answered May 17, 2020 at 18:15

fazlu

9567 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to send data from Node.js server to HTML document?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related