Push multiple objects in an new array makes array undefined

Question

I used API calls GET JSON data, filtering it and pushing objects into a new array. However, the elements of the array are undefined types instead of objects.

function filterDataAtSource(city, vacTypeFilters) {
    var filteredFeatures = [];

    getData().then(function (geojson) {
        var features = geojson.features
        features.forEach(element => {
            if (element.properties.City === city) {
                console.log("type of element :", typeof (element));
                filteredFeatures.push(element);
            }
        });
    })
    console.log("typeof child:", typeof (filteredFeatures[0])); /* undefined type here */
}

Ben Aston · Accepted Answer · 2022-09-16 18:52:07Z

You are working with asynchronous code and need to connect in to the promise chain to avoid looking at the variable value too early.

Something like this might work better:

function filterDataAtSource(city, vacTypeFilters) {        
    // return the promise
    return getData().then(function(geojson) {
        var filteredFeatures = [];
                    
        geojson.features.forEach(element => {                                           
            if (element.properties.City === city) {
                console.log("type of element :", typeof(element));
                filteredFeatures.push(element);
            }
        };

        // return this to minimize visibility
        return filteredFeatures;
     }); 
});

filterDataAtSource('Paris', {})
    .then((filteredFeatures) => {
        console.log("typeof child:", typeof(filteredFeatures[0]));
    });

And you can play around with the factoring of the code by using async functions. For example:

const filterDataAtSource = async (city, vacTypeFilters) =>
    (await getData())
        ?.features
        ?.filter(({ properties: { City } }) => City === city)

// ensure you are in an async function, or an environment that supports global async
const filteredFeatures = await filterDataAtSource('Paris', {})
console.log("typeof child:", typeof(filteredFeatures[0]));

SwaD · Accepted Answer · 2022-09-16 18:09:45Z

0

You add values to the array only by condition element.properties.City === city Are you sure that the condition is met at least once? Have you checked the length of the array filteredFeatures at the output?

undefined can be for the simple reason that there is no 0 element in the array

answered Sep 16, 2022 at 18:09

SwaD

6415 silver badges14 bronze badges

Comments

Huy Pham · Accepted Answer · 2022-09-16 18:20:21Z

0

You are retrieving values before they exist because of calling an asynchronous function.

You could try this also. Make filterDataAtSource() asynchronous to await getData().

async function filterDataAtSource(city, vacTypeFilters) {
    var filteredFeatures = [];
    const geojson = await getData();
    console.log("typeof child:", typeof(filteredFeatures[0])); /* undefined type here */
    
    var features = geojson.features;
             
    features.forEach(element => {     
        if (element.properties.City === city) {
            console.log("type of element :", typeof(element));
            filteredFeatures.push(element);
        }
    });
}

answered Sep 16, 2022 at 18:20

Huy Pham

4591 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

Push multiple objects in an new array makes array undefined

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