Accessing JSON data array of objects returns undefined

Question

<!DOCTYPE html>

<html>

<head>

    <title>Practice</title>

</head>

<body>


    <script>
        const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

        const cities = [];

        fetch(endpoint)
            .then(blob => blob.json())
            .then(data => cities.push(...data));


        console.log(cities)
        console.log(cities[0])
        console.log(cities[0].city)
    </script>
</body>

</html>

The code is supposed to get data from JSON, push it into the cities array with spread operator then play with the cities array to access its contents.

But I run this code on a browser and open console, console.log(cities) shows an array of objects. But when I'm trying to access the object inside, it returns undefined. I tried to copy property path on chrome console and it shows [0].city.

I expect a result of

{city: 'New York', growth_from_2000_to_2013: '4.8%', latitude: 40.7127837, longitude: -74.0059413, population: '8405837', …}

when I run console.log(cities[0])

and get

'New York'

when I run console.log(cities[0].city)

unfortunately it shows

undefined

and

index.html:26 Uncaught TypeError: Cannot read properties of undefined (reading 'city') at index.html:26:31

respectively.

dRoyson · Accepted Answer · 2022-10-22 03:46:48Z

0

fetch is an asynchronous operation, meaning by the time the cities is populated your code has already executed the console.log statement. To fix this make the following change:

<!DOCTYPE html>

<html>

<head>

    <title>Practice</title>

</head>

<body>


    <script>
        const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

        const cities = [];

        fetch(endpoint)
            .then(blob => blob.json())
            .then(data => cities.push(...data))
            .then(() => {
                  console.log(cities)
                  console.log(cities[0])
                  console.log(cities[0].city)
             });
    </script>
</body>

</html>

answered Oct 22, 2022 at 3:46

dRoyson

1,5173 gold badges14 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Accessing JSON data array of objects returns undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related