My array's length is always zero even it contains elements

Question

I am working on a COVID tracker web app with React. I have modified the JSON data fetched from an api according my needs. But when I test by looping over it it doesn't show up anything. And when I tried to log it into my console it shows empty and undefined for the elements in the array.

Here is the code I used to fetch the data

const districts = [];
const fetchedData = fetch(
    "https://api.covid19india.org/state_district_wise.json"
)
    .then((res) => res.json())
    .then((data) => {
        for (let district in data["Tamil Nadu"].districtData) {
        
                districts.push(
                    // obj["district"] = [district];
                    data["Tamil Nadu"].districtData[district],
                );
      districts.map((districtName)=>{
        districtName.district = district
      })

        }
    });

// for (var key in districts) {
//   console.log(key);
// }
 console.log(districts)

`fetch` is asynchronous, try to move the `console.log(districts)` right after the `districts.map(...);` — Kaddath, Aug 04 '20 at 12:17
Unrelated issue, but you're also misusing `.map()`, use `.forEach()` instead when you want to perform iteration only, `.map()` is for transforming elements and returns the modified array. See [Is performing a mapping operation without using returned value an antipattern?](https://stackoverflow.com/a/56904505) — Nick Parsons, Aug 04 '20 at 12:27

kiranvj · Answer 1 · 2020-08-04T12:26:28.720

You will not get districts right after a fetch call as its an asynchronous call.

This is the React way to do it. Do the fetch call when component mounts. First useEffect is triggered on component mount (see the empty dependency array). Second useEffect is triggered whenever districts data is changed.

const [districts, setDistricts] = useState([]);


useEffect(()=>{

    const fetchedData = fetch(
       "https://api.covid19india.org/state_district_wise.json"
    )
    .then((res) => res.json())
    .then((data) => {
        for (let district in data["Tamil Nadu"].districtData) {
        
                districts.push(
                    // obj["district"] = [district];
                    data["Tamil Nadu"].districtData[district],
                );
      districts.map((districtName)=>{
        districtName.district = district
      })
      

        }
        // set state
        setDistricts(districts);
    });

}, []);


// for (var key in districts) {
//   console.log(key);
// }
useEffect(()=> {
   console.log(districts)
}, [districts]);

score 0 · Answer 2 · answered Aug 04 '20 at 12:19

as you can see below, fetch is asynchronous, console.log(2,...) is logged before console.log(1,...). Just do the rest of your code near console.log(1, ...). or use await/async syntax

const districts = [];
const fetchedData = fetch(
    "https://api.covid19india.org/state_district_wise.json"
)
    .then((res) => res.json())
    .then((data) => {
        for (let district in data["Tamil Nadu"].districtData) {
        
                districts.push(
                    // obj["district"] = [district];
                    data["Tamil Nadu"].districtData[district],
                );
      districts.map((districtName)=>{
        districtName.district = district
      })
      console.log('1', districts)

        }
    });

// for (var key in districts) {
//   console.log(key);
// }
console.log('2', districts)

My array's length is always zero even it contains elements

2 Answers2