날씨 API를 이용한 모바일 웹을 만들고있습니다.
openWeather map API ( https://api.openweathermap.org/data/2.5/onecall?lat=11.546755&lon=127.203827&exclude=minutely&appid={API키} 형식으로
lat(x)좌표와lon(y)좌표를 바꿔가며 이용해야하는 API인데요
이런 형식으로 처음에 들어왔을 때 state에 저장된 x,y좌표 값들을 받아와 배열.map()이용해서
element들을 나열 하고싶은데 API를 어떤식으로 끌어와야할지 잘 모르겠어서 질문을 남겨봅니다.
// 시도해보고있는 방법
// 시도중인 방법 (1) 한번에 API를 끌어온다는 생각으로 axios.all이용
let array = new Array();
array = [
axios.get(
"https://api.openweathermap.org/data/2.5/onecall?lat=37.546755&lon=127.203827&exclude=minutely&appid"
),
axios.get(
"https://api.openweathermap.org/data/2.5/onecall?lat=32&lon=127.203827&exclude=minutely&appid"
),
axios.get(
"https://api.openweathermap.org/data/2.5/onecall?lat=11.546755&lon=127.203827&exclude=minutely&appid"
),
];
useEffect(() => {
axios
.all(array)
.then(
axios.spread((res1, res2, res3) => {
const ex1 = res1.data;
const ex2 = res2.data;
const ex3 = res3.data;
console.log(ex1, ex2, ex3);
})
)
.catch((err) => console.log(err));
}, []);
// 위와 같은 방법은 각각 위치의 json이 잘 끌어와 지지만 props를 하나하나 끌어와야하는듯해서
위치를 추가하는 기능을 넣어야하는 부분에서 불가능 할 것 같아
제가 아는 한도에선 불가능한 방법이라고 생각되었습니다.
//시도중인 방법2 배열에 lat,lon값을 배열 내부 object형으로 나타내여 for문으로 API호출 후
bigdata 안에 0번 json 1번 json 2번 json 으로 끌어온 뒤 return 부분에
map함수로 element를 출력 시도한다.
const [array, setArray] = useState([
{
lat: 37.5833,
lon: 126.9778,
},
{
lat: 32.3236,
lon: 120.8219,
},
]);
const [bigData, setData] = useState([]);
const getfetch = async (x, y) => {
const json = await (
await fetch(
`${baseUrl}lat=${x}&lon=${y}&exclude=minutely&appid=${apiKey}`
)
).json();
// setData([...json, bigData]);
setData([json, ...bigData]);
};
useEffect(() => {
for (let i = 0; i < array.length; i++) {
getfetch(array[i].lat, array[i].lon);
}
}, []);
//위와 같은 방법은 for문으로 API를 끌어오는 것이 오류를 일으키는듯해서
제가 아는 한도에서는 이것도 방법이 아닌 것 같았습니다.
혹시 이 글을 보고 답변해주려고하시는분이 제가 쓴 글이 이해가 가지않는다면
그냥 다 빼고 자기 자신이라면 맨 위의 UI처럼 만들려고 하면 이런 방식으로 API를
끌어오는게 아무래도 좋을 것같다고 조언 한번만 부탁드립니다.
정말 간절해요,,, 주변에 물어볼 사람이 아무도 없습니다.
