Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

232
Visualizações
How do I store the JSON response such that I can use it in other functions (React & JS)?

fetchData.js -> File where we fetch the data. This file is later imported and the functions will be used to display the fetched data.

import { weatherAPIConfig } from "../weatherAPIConfig"

export async function fetchWeatherForecast(cityName) {
    let URL = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&units=metric&appid=${weatherAPIConfig.key}`
    try {
    const fetchWeatherForecast = await fetch(URL)
    const weatherForecastJSON = await fetchWeatherForecast.json()
    return weatherForecastJSON
   }
    catch (error) {
        console.log("Could not find given city");
        return "Could not find given city"
    }
}

export function getWeatherDescription(weatherForecastJSON) {
    return weatherForecastJSON.weather[0].description;
}

export function getWeatherTemperature(weatherForecastJSON) {
    return weatherForecastJSON.main.temp
}

export function getWeatherWindSpeed(weatherForecastJSON) {
    return weatherForecastJSON.wind.speed;
}

export function getWeatherHumidity(weatherForecastJSON) {
    return weatherForecastJSON.main.humidity
}

Row.js -> The file where the temperature etc. is displayed in div

import React from 'react'
import {getWeatherDescription, getWeatherHumidity, getWeatherTemperature, getWeatherWindSpeed, fetchWeatherForecast}  from '../../functions/fetchData'
import { weatherAPIConfig } from '../../weatherAPIConfig';

function Row() {

    return (
    <div>
        <div>API-key: {weatherAPIConfig.key}</div>
    <div>Result: {getWeatherDescription(fetchWeatherForecast("London"))}</div>
    </div>
  )
}

export default Row;

........................................................................................

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

I recommend having your "fetchWeatherForecast" function return an object with those methods available for parsing:

import { weatherAPIConfig } from "../weatherAPIConfig"

export async function fetchWeatherForecast(cityName) {
    let URL = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&units=metric&appid=${weatherAPIConfig.key}`
    try {
    const weatherForecast = await fetch(URL) //changed cuz I don't recommend naming your variable the same as the function
    const weatherForecastJSON = await fetchWeatherForecast.json()
    } catch (error) {
        console.log("Could not find given city");
        return "Could not find given city"
    }

    function getWeatherDescription() {
        return weatherForecastJSON.weather[0].description;
    }

    function getWeatherTemperature() {
        return weatherForecastJSON.main.temp
    }

    function getWeatherWindSpeed() {
        return weatherForecastJSON.wind.speed;
    }

    function getWeatherHumidity() {
        return weatherForecastJSON.main.humidity
    }

    return {getWeatherDescription, getWeatherTemperature, getWeatherWindSpeed, getWeatherHumidity}
}

So now in your "Row.js", you can do:

import React from 'react'
import {fetchWeatherForecast}  from '../../functions/fetchData'
import { weatherAPIConfig } from '../../weatherAPIConfig';
const {useEffect, useState} = React;

function Row() {

    var [forecast, setForecast] = useState({});

    useEffect(()=>{
        fetchWeatherForecast("London").then((forecastObj)=>setForecast(forecastObj));
    }, [])

    return (
    <div>
        <div>API-key: {weatherAPIConfig.key}</div>
    <div>Result: {forecast.getWeatherDescription?.()}</div>
    </div>
  )
}

export default Row;

As a disclaimer, I haven't tested this code. But the gist of it is, have the "fetchweatherForecast" method return an object with methods that can access the "weatherForecastJSON" object. Then instantiate this object within your "Row.js" and render the data with the methods returned from the "weatherForecastJSON" object.

Edit: As noted by @Patrick Roberts, "forecast.getWeatherDescription()" would throw an error the first render. To remedy that, I've used optional chaining which would call the function only if it exists on the object. The alternative would be:

<div>Result: {forecast.getWeatherDescription ? forecast.getWeatherDescription() : ''}</div>
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda