reactJS fetch json data from API

Question

I am new to JS and reactJS. I want to get info from API to an array. I made API that show all the info from my database. It looks like this:

const [tempNew, setTempNew] = useState([]);
const getAllWeatherCelsius = () => {
    fetch('http://localhost:5000/weather')
      .then(response => {
        return response.json();
      })
      .then((jsonData) => {
        let tmpArray = [];
        for (var i = 0; i < jsonData.length; i++) {
          tmpArray.push(jsonData.dayCelsius[i])   <---- here is the error
        }
        setTempNew(tmpArray);
      })
  }

I want to collect all values from "dayCelsius" line into array.

What do I need to change in this code?

Raycas · Accepted Answer · 2021-02-19 16:28:00Z

2

Can you provide more info about the error? But You can try using the map function like

 const tmpArray = jsonData.map(r => r.dayCelsius);

answered Feb 19, 2021 at 16:28

Raycas

1311 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

alisasani · Accepted Answer · 2021-02-19 16:30:59Z

2

You can use map function to return the dayCelsius value of each element and store them in the tmpArray.

let tmpArray = jsonData.map((el, i) => el.dayCelsius);

edited Feb 19, 2021 at 16:30

answered Feb 19, 2021 at 16:25

alisasani

3,1311 gold badge10 silver badges19 bronze badges

Comments

hersheys17 · Accepted Answer · 2021-02-19 17:03:24Z

So, what I understand is that you are facing difficulty in just getting the dayCelsius value from the array of objects you fetch from your API.

It is difficult to make out what the problem is as more info about the error is required to see what is going wrong.

What I have done differently here is instead of the for-loop and jsonData.dayCelsius[i], I have used data.map((r,e) => r.dayCelsius).

const [temp, setTemp] = useState([]);
const getAllWeatherCelsius = () => {
    fetch('http://localhost:5000/weather', {
        method: "GET",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
        }
    })
      .then(response => {
        return response.json();
      })
      .then((data) => {
        const tempArray = data.map((r,e) => r.dayCelsius); 
        setTemp(tempArray);
      })
      .catch(err => console.log(err));
  }

I hope it helps you, have a good day :)

Collectives™ on Stack Overflow

reactJS fetch json data from API

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related