How to remove empty objects in an array by passing it to a function - javascript?

Question

Hi Here i am having a object that is returned from api.

let ApiData1 = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 10,
                "stateId": 10,
                "name": "Tamil Nadu",
                "code": "TN"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 11,
                "stateId": 11,
                "name": "Karnataka",
                "code": "KA"
            }
        },
        null,
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 12,
                "stateId": 12,
                "name": "Pondicherry",
                "code": "PY"
            }
        },
        null,
          {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 1,
                "stateId": 1,
                "name": "Delhi",
                "code": "DL"
            }
        }

    ]
}

In this data, in ApiData1.features . there are some null values retuned. I need to remove this null values and has to return like this.

OutPut

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 10,
                "stateId": 10,
                "name": "Tamil Nadu",
                "code": "TN"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 11,
                "stateId": 11,
                "name": "Karnataka",
                "code": "KA"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 12,
                "stateId": 12,
                "name": "Pondicherry",
                "code": "PY"
            }
        },
          {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 1,
                "stateId": 1,
                "name": "Delhi",
                "code": "DL"
            }
        }

    ]
}

is anyway to achieve this by passing this ApiData into a function and return like this. Could u please help me with this.

Thanks in advance

Answer 1

Try this, it should help get rid of nulls

ApiData1.features = ApiData1.features.filter(ob => ob !==null)

Answer 2

You can use ES6 spread operator and .filter() to filter the null data, here is a working snippet:

 let ApiData1 = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "MultiPolygon" }, "properties": { "color": 1, "id": 10, "stateId": 10, "name": "Tamil Nadu", "code": "TN" } }, { "type": "Feature", "geometry": { "type": "MultiPolygon" }, "properties": { "color": 1, "id": 11, "stateId": 11, "name": "Karnataka", "code": "KA" } }, null, { "type": "Feature", "geometry": { "type": "MultiPolygon" }, "properties": { "color": 1, "id": 12, "stateId": 12, "name": "Pondicherry", "code": "PY" } }, null, { "type": "Feature", "geometry": { "type": "MultiPolygon" }, "properties": { "color": 1, "id": 1, "stateId": 1, "name": "Delhi", "code": "DL" } } ] } let newData = {...ApiData1, features: ApiData1.features.filter((el) => el) } console.log(newData);

Answer 3

Added flavor of Imperative style of coding.

• Used forEach loop
• In JS object/Arrays are pass by ref.
• Updates ApiData1 features data using [...spreadOperator]

  var ApiData1 = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 10,
                "stateId": 10,
                "name": "Tamil Nadu",
                "code": "TN"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 11,
                "stateId": 11,
                "name": "Karnataka",
                "code": "KA"
            }
        },
        null,
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 12,
                "stateId": 12,
                "name": "Pondicherry",
                "code": "PY"
            }
        },
        null,
          {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon"
            },
            "properties": {
                "color": 1,
                "id": 1,
                "stateId": 1,
                "name": "Delhi",
                "code": "DL"
            }
        }

    ]
};


var features =[];
ApiData1.features.forEach(feature => feature ? features.push(feature): null);
ApiData1['features'] = [...features];
console.log(ApiData1);