Display a list of weather info in a table (OpenWeather API)-CodePudding

I use OpenWeather API to make an app in which you can search for the city you want to view its weather info(temp,weather description,min temp...). I made this part but i m stuck when i try to add forecast option in which you can see 5 Day / 3 Hour Forecast weather.

This is what i receive as a response

The correct response would display a table that shows every 3 hours weather info but now i receive only one row with one date info.

I tried some loops but didn't work.

ForecastWeatherController.java

@Controller
@RequestMapping("/")
public class ForecastWeatherController{


    @Autowired
    private ForecastWeatherService forecastWeatherService;


    @GetMapping("/info/{counterValue}/info/{cityValue}")
    public String getInfo(@PathVariable("counterValue") int counterValue, @PathVariable("cityValue") String cityValue , Model model){

        String name = forecastWeatherService.getForecastInfoByCity(counterValue, cityValue).getCity().getName();
        double temp = forecastWeatherService.getForecastInfoByCity(counterValue, cityValue).getList().listIterator().next().getMain().getTemp();
        String desc = forecastWeatherService.getForecastInfoByCity(counterValue, cityValue).getList().listIterator().next().getWeather().listIterator().next().getDescription();
        double minTemp = forecastWeatherService.getForecastInfoByCity(counterValue, cityValue).getList().listIterator().next().getMain().getTemp_min();
        double maxTemp = forecastWeatherService.getForecastInfoByCity(counterValue, cityValue).getList().listIterator().next().getMain().getTemp_max();
        String date = forecastWeatherService.getForecastInfoByCity(counterValue, cityValue).getList().listIterator().next().getDt_txt();

        model.addAttribute("cityName", name);
        model.addAttribute("weatherTemp", temp);
        model.addAttribute("weatherDesc", desc);
        model.addAttribute("weatherMinTemp", minTemp);
        model.addAttribute("weatherMaxTemp", maxTemp);
        model.addAttribute("weatherDate", date);


        return "home2";
    }

home2.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Weather API Application</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>
<body>
<div >
    <h1>Weather Tracker API</h1>
    <p>Search for the city you want to view weather details</p>

    <table >
        <tr>
            <th>
                City</th>
            <th>
                Temperature Now</th>
            <th>
                Weather Description</th>
            <th>
                Minimum Temperature</th>
            <th>
                Maximum Temperature</th>
            <th>Date</th>
        </tr>

        <td th:text="${cityName}">
        <td th:text="${weatherTemp}">
        <td th:text="${weatherDesc}">
        <td th:text="${weatherMinTemp}">
        <td th:text="${weatherMaxTemp}">
        <td th:text="${weatherDate}"/>

    </table>

</body>
</html>

ForecastWeatherService.java

 public interface ForecastWeatherService {
    
        public ForecastWeatherModel getForecastInfoByCity(int counter , String cityValue);
    
    }

ForecastWeatherServiceImpl.java

@Service
public class ForecastWeatherServiceImpl implements ForecastWeatherService{

    @Value("${forecast.url}")
    private String forecastApiBaseUrl;

    @Value("${additional.url}")
    private String forecastApiAdditionalUrl;


    @Value("${api.key}")
    private String apiKey;

    @Autowired
    private RestTemplate restTemplate;


    @Override
    public ForecastWeatherModel getForecastInfoByCity(int counter , String cityValue) {

        ForecastWeatherModel result = restTemplate.getForObject(forecastApiBaseUrl counter "&appid=" apiKey forecastApiAdditionalUrl cityValue "&units=metric" , ForecastWeatherModel.class);

        return result;
    }

application.properties

 external.api.url=  https://api.openweathermap.org/data/2.5/weather?q= 
    api.key = ApiKeyExample
    server.port = 8080
    
    # ---------------------------FORECAST---------------------------
    
    forecast.url = https://api.openweathermap.org/data/2.5/forecast?cnt=
    additional.url = &q=

Do i have to loop inside getInfo method and home2.html or i should make a ForecastWeatherModel List and loop the elements?

CodePudding user response：

Instead of putting each attribute on, put the entire object on. Then you can use Thymeleaf to loop through. For example:

@GetMapping("/info/{counterValue}/info/{cityValue}")
public String getInfo(@PathVariable("counterValue") int counterValue, @PathVariable("cityValue") String cityValue , Model model){
  model.addAttribute("forecast", forecastWeatherService.getForecastInfoByCity(counterValue, cityValue));
  return "home2";
}

Then, in the Thymeleaf you loop over the same attributes.

<div >
    <h1>Weather Tracker API</h1>
    <h2 th:text="${forecast.city}" />
    
    <table >
        <tr>
            <th>Temperature Now</th>
            <th>Minimum Temperature</th>
            <th>Maximum Temperature</th>
            <th>Date</th>
        </tr>
        
        <tr th:each="data: ${forecast.list}">
            <td th:text="${data.main.temp}" />
            <td th:text="${data.main.getTemp_min()}" />
            <td th:text="${data.main.getTemp_max()}" />
            <td th:text="${data.main.getDt_txt()}" />
        </tr>
    </table>
</div>