In the current code, I am taking data in cities and then concate with search. Search has the data in this format (Delhi,Dehradun,Kotdwara,Pune) and when I am passing it through API it is picking the first element (Delhi) and showing only its data. What I want is to pick all the cities one by one and pass them through API one by one. API will run multiple times.
const [city, setCity] = useState(null);
const [search, setSearch] = useState("");
const [istru, setIstru] = useState(false);
const cities = ["Delhi","Dehradun","Kotdwara","Pune"];
if(istru==false)
{
setSearch(search.concat(cities))
setIstru(true);
}
const getCity = async (search) => {
const url = `https://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=7938d9005e68d8b258a109c716436c91`;
const response = await fetch(url);
const resJson = await response.json();
const city = resJson.main;
return city;
};
const getAllCities = async() => {
const promises = cities.map(city => getCity(city))
const cities = await Promise.all(promises);
// Do whatever you want with all cities
}
useEffect(() => {
getAllCities();
}, [cities]);
return(
{!city ? (
<p className="errorMsg">Enter City Name</p>
) : (
<div>
<div className="info">
<h2 className="location">
<i className="fa-solid fa-street-view"> </i>{search}
</h2>
<h1 className="temp">
{cities.temp}
</h1>
<h3 className="tempmin_max">
Min : {cities.temp_min} | Max : {cities.temp_max}
</h3>
</div>
)```
If you want to do one by one you can do something like this:
const getCity = async (search) => {
const url = `https://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=7938d9005e68d8b258a109c716436c91`;
const response = await fetch(url);
const resJson = await response.json();
const city = resJson.main;
return city;
};
const getAllCities = async() => {
const promises = cities.map(city => getCity(city))
const cities = await Promise.all(promises);
// Do whatever you want with all cities
}
useEffect(() => {
getAllCities();
}, [cities]);