Missing data in JSON from API call, gives error

I make an API call to server to fetch data

    const api_url = "https://my_urlxxx"

addMyData()
    .then(response => {
        //console.log('Working!');
    })
    .catch(error => console.log(error.message));
    
async function addMyData() {
    const response = await fetch(api_url);
    const data = await response.json();

Then I turn the JSON into GeoJSON for Leaflet.js

geojson['type'] = 'FeatureCollection';
    geojson ['features'] = [];
    
    for (i = 0; i < data.length; i++) {
            x = data[i].location.coordinate.longitude;
            y = data[i].location.coordinate.latitude;
        console.log('get ', data[i].itemId); //find the error...
        console.log('get ', data[i].openingHours);
        console.log('get ', data[i].openingHours.services[0]);
        console.log('get ', data[i].openingHours.services[0].openDay); // error = undefined

        var newFeature = {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [x,y]
                },
                "properties": {
                    "status": data[i].status,
                    "itemId": data[i].itemId,
                    "name": data[i].name,
                    "openingMonday": days(data[i].openingHours.services[0].openDay) + ' ' + num2time(data[i].openingHours.services[0].openTime) + 'u2014' + num2time(data[i].openingHours.services[0].closeTime)
                  }
        }
        geojson ['features'].push(newFeature);
    }
    //console.log(JSON.stringify(geojson));
    loadData (geojson);
    };
    
    function loadData(MyGeoJSONData) {
    
    MyLayer = L.geoJson(MyGeoJSONData, {
    
    pointToLayer: function (feature, latlng) {
            if (feature.properties.status != "1") {
            return new L.shapeMarker(latlng, {
                radius: 4,
                color: '#252525', //#d53e4f
                fillOpacity: 0.3,
                weight: 2,
                shape: 'circle'
            })
            }
    },

The problem is that every items does not have the values of “openingHours”. This makes the error “undefined” and I can’t retrieve data to display on Leaflet map. How can I go pass or ignore those values or perhaps filter them out before creating the GeoJSON?

This is part of the JSON file of openingHours, this whole part can be missing for some items in the JSON list and I can’t get passed this…

   "openingHours": {
  "services": [
    {
      "closeDay": "Monday",
      "closeTime": "2359",
      "openDay": "Monday",
      "openTime": "0000"
    },
    {
      "closeDay": "Tuesday",
      "closeTime": "2359",
      "openDay": "Tuesday",
      "openTime": "0000"
    },
    {
      "closeDay": "Wednesday",
      "closeTime": "2359",
      "openDay": "Wednesday",
      "openTime": "0000"
    },
    {
      "closeDay": "Thursday",
      "closeTime": "2359",
      "openDay": "Thursday",
      "openTime": "0000"
    },
    {
      "closeDay": "Friday",
      "closeTime": "2359",
      "openDay": "Friday",
      "openTime": "0000"
    },
    {
      "closeDay": "Saturday",
      "closeTime": "2359",
      "openDay": "Saturday",
      "openTime": "0000"
    },
    {
      "closeDay": "Sunday",
      "closeTime": "2359",
      "openDay": "Sunday",
      "openTime": "0000"
    }
  ],
  "specialDates": [
    
  ]
},

Answer

You don’t need to filter here, you can just check with ternaries and return an empty string(or whatever you might need), if it does not exist:

"openingMonday": data[i]?.openingHours?  days(data[i].openingHours.services[0].openDay) + ' ' + num2time(data[i].openingHours.services[0].openTime) + 'u2014' + num2time(data[i].openingHours.services[0].closeTime): ''

Advertisement

Answer