CODEWITHSUNDEEP
javascriptarraysreactjsjavascript-objects
SDK
SDK

Reputation: 1508

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

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

Upvotes: 0

Views: 74

Answers (3)

khizerrehandev
khizerrehandev

Reputation: 1525

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);

Upvotes: 0

ROOT
ROOT

Reputation: 11622

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);

Upvotes: 1

Harmandeep Singh Kalsi
Harmandeep Singh Kalsi

Reputation: 3345

Try this , it should help get rid of nulls 

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

Upvotes: 2

Related Questions