在表格中顯示天氣信息列表（OpenWeather API）

Question

我使用 OpenWeather API 制作了一個應用程序，您可以在其中搜索要查看其天氣信息（溫度、天氣描述、最低溫度...）的城市。 我做了這部分，但當我嘗試添加預報選項時我卡住了，您可以在其中查看 5 天/3 小時預報天氣。

這是我收到的回復

正確的響應會顯示一個表格，每 3 小時顯示一次天氣信息，但現在我只收到一行和一個日期信息。

我嘗試了一些循環但沒有用。

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 class="container">
    <h1>Weather Tracker API</h1>
    <p>Search for the city you want to view weather details</p>

    <table class="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;
    }

應用程序.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=

我是否必須在 getInfo 方法和 home2.html 中循環，或者我應該制作一個 ForecastWeatherModel 列表並循環元素？

Answer 1

不要把每個屬性都放在上面，而是把整個 object 放在上面。 然后就可以用Thymeleaf來循環了。 例如：

@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";
}

然后，在 Thymeleaf 中循環相同的屬性。

<div class="container">
    <h1>Weather Tracker API</h1>
    <h2 th:text="${forecast.city}" />
    
    <table class="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>

在表格中顯示天氣信息列表（OpenWeather API）

問題描述

1 個解決方案

解決方案1
1 已采納 2022-10-08 16:14:54

在表格中顯示天氣信息列表（OpenWeather API）

問題描述

1 個解決方案

解決方案1 1 已采納 2022-10-08 16:14:54

解決方案1
1 已采納 2022-10-08 16:14:54