how to render html format in node.js (openweathermap.api)

This is my code below. What I want to do is when I render, I'd like to render a html format to index.pug without using res.send(body); When I put a zipcode, a result like the below link will show under text in index.pug.

body is this link. this link is designed in html not image.

link I want to use

topic.js

 router.post('/weather', function(req,res){
      let url = `http://api.openweathermap.org/data/2.5/weather?zip=${req.body.zipcode}&mode=html&units=imperial&appid=${apiKey}`
      request(url, function (err, response, body) {
//this below code works but not what I wanna do           
res.send(body);
//this is something I'd like to use
res.render('index',text:body);
          }
       });
    })

index.pug

h1= text

Solution

The first issue you're seeing is calling the OpenWeather API and fetching only one zip code at a time. Let's fix that first, then we need to address getting the data efficiently into the pug template where you can generate your table.

1. Fetching Multiple Values

The API spec says that you can string multiple city ID's together but not zip codes. If you want to keep this easy in the route you should switch to city ID:

http://api.openweathermap.org/data/2.5/group?id=524901,703448,2643743&units=metric

Otherwise you will need to make multiple calls to the api in the route, something that is possible using a library such as async but you say you're just starting out with programming so that's probably not a good first step.

Hopefully your app can use City ID instead, or at the very least you can start with that.

2. Sending the results to the template

The results from a multi-city query look like this:

{"cnt":3,"list":[{"coord":{"lon":37.62,"lat":55.75},"sys":{"type":1,"id":7323,"message":0.0036,"country":"RU","sunrise":1485753940,"sunset":1485784855},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"main":{"temp":-10.5,"pressure":1028,"humidity":66,"temp_min":-11,"temp_max":-10},"visibility":10000,"wind":{"speed":5,"deg":200},"clouds":{"all":0},"dt":1485793175,"id":524901,"name":"Moscow"},{"coord":{"lon":30.52,"lat":50.45},"sys":{"type":1,"id":7358,"message":0.0268,"country":"UA","sunrise":1485754480,"sunset":1485787716},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"main":{"temp":-11.04,"pressure":1033,"humidity":61,"temp_min":-15,"temp_max":-9},"visibility":10000,"wind":{"speed":3,"deg":150},"clouds":{"all":0},"dt":1485793175,"id":703448,"name":"Kiev"},{"coord":{"lon":-0.13,"lat":51.51},"sys":{"type":1,"id":5091,"message":0.0034,"country":"GB","sunrise":1485762036,"sunset":1485794875},"weather":[{"id":701,"main":"Mist","description":"mist","icon":"50d"},{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"main":{"temp":7,"pressure":1012,"humidity":81,"temp_min":5,"temp_max":8},"visibility":10000,"wind":{"speed":4.6,"deg":90},"clouds":{"all":90},"dt":1485793175,"id":2643743,"name":"London"}]}

You'll need to loop through every entity in the list property and extract the data you want. Here's an example using for...of, it loops through the results, creates a new simpler object for each city, then adds that to the weatherData array. Just pass weatherData into your template using res.render and you'll find it very easy to create your table.

var weatherData = [];

for(var city in body.list){
  var cityWeather = {
    "name": city.name,
    "temperature": city.main.temp,
    "weather": city.weather[0].description
  };

  weatherData.push(cityWeather);

}

res.render('topic/weather', {"cities": weatherData});