Filter array from Json

Question

the script below filter data from a json file and show results in a div. I need to check the data filtered in the array to show more datailed results.

Script

$(function(){
    $.getJSON("comuni.php", function(jsonData) {
        var jsonData = jsonData;
        var nomeComune = jQuery.map(jsonData, function(item, index) {
            return item.nomeComune;
        });
        $( "#comuni" ).autocomplete({
            source: nomeComune,
            minLength: 2,
            select:function(event, ui){
                var filterData = jsonData.filter(user => user.nomeComune == ui.item.value);
                var userData = '<ul>';
                userData +=  '<li>Il Comune di <strong>'+filterData[0]['nomeComune']+'</strong> <strong>('+filterData[0]['provincia']+')</strong></li>';
                userData +=  '<li>è in presubentro dal <strong>'+filterData[0]['datasub']+'</strong></li>';
                userData +=  '<li>è subentrato il <strong>'+filterData[0]['datapresub']+'</strong></li>';
                userData += '</ul>';
                $('#results').html(userData);
                console.log(filterData[0]);
                $('.results').slideDown( "slow", function() {
                    // Animation complete.
                });
                $(".results").click(function () {
                    $(this).slideUp( "slow", function() {
                        // Animation complete.
                    });
                });
            },
        });
    });
});

Json

[
  {
    "nomeComune":"Roma",
    "provincia":"RM",
    "datasub":"",
    "datapresub":"2019-12-04"
  },
  {
    "nomeComune":"Catania",
    "provincia":"CT",
    "datasub":"2019-12-04",
    "datapresub":""
  },
  {
    "nomeComune":"Milano",
    "provincia":"MI",
    "datasub":"",
    "datapresub":"2019-12-04"
  },
  {
    "nomeComune":"Napoli",
    "provincia":"NA",
    "datasub":"2019-12-04",
    "datapresub":""
  },
  {
    "nomeComune":"Firenze",
    "provincia":"FI",
    "datasub":"",
    "datapresub":"2019-12-04"
  },
  {
    "nomeComune":"Bologna",
    "provincia":"BO",
    "datasub":"2019-12-04",
    "datapresub":""
  },
  {
    "nomeComune":"Palermo",
    "provincia":"PA",
    "datasub":"",
    "datapresub":"2019-12-04"
  },
  {
    "nomeComune":"Genova",
    "provincia":"GE",
    "datasub":"2019-12-04",
    "datapresub":""
  },
  {
    "nomeComune":"Lecce",
    "provincia":"LE",
    "datasub":"",
    "datapresub":"2019-12-04"
  },
  {
    "nomeComune":"Udine",
    "provincia":"UD",
    "datasub":"2019-12-04",
    "datapresub":""
  }
]

I need to check if value of datasub or datapresub is empty and show results accordingly. Eg:

If value datasub is empty the results should be:

var userData = '<ul>';
userData +=  '<li>Il Comune di <strong>'+filterData[0]['nomeComune']+'</strong> <strong>('+filterData[0]['provincia']+')</strong></li>';
userData +=  '<li>è in presubentro dal <strong>'+filterData[0]['datapresub']+'</strong></li>';
userData += '</ul>';

If value datapresub is empty the results should be:

var userData = '<ul>';
userData +=  '<li>Il Comune di <strong>'+filterData[0]['nomeComune']+'</strong> <strong>('+filterData[0]['provincia']+')</strong></li>';
userData +=  '<li>è subentrato il <strong>'+filterData[0]['datasub']+'</strong></li>';
userData += '</ul>';

Any help is appreciated. Thanks

Answer 1

As stated in the comments above, you can do something like below. I added two helper functions to make things a little neater. Simply pass filterData[0] to the function getData() and it will return the populated unordered list.

$(function(){
    $.getJSON("comuni.php", function(jsonData) {
        var jsonData = jsonData;
        var nomeComune = jQuery.map(jsonData, function(item, index) {
            return item.nomeComune;
        });
        $( "#comuni" ).autocomplete({
            source: nomeComune,
            minLength: 2,
            select:function(event, ui){
                var filterData = jsonData.filter(user => user.nomeComune == ui.item.value);
                var userData = getData(filterData[0]);     // <-- Changed here
                $('#results').html(userData);
                console.log(filterData[0]);
                $('.results').slideDown( "slow", function() {
                    // Animation complete.
                });
                $(".results").click(function () {
                    $(this).slideUp( "slow", function() {
                        // Animation complete.
                    });
                });
            },
        });
    });


    // Some helper functions
    function getData(data) {
        let returnValue = '<ul>';

        if( existsAndNotEmpty(data['nomeComune']) && existsAndNotEmpty(data['provincia']) ) {
            returnValue += '<li>Il Comune di <strong>'+data['nomeComune']+'</strong> <strong>('+data['provincia']+')</strong></li>';
        }

        if( existsAndNotEmpty(data['datasub']) ) {
            returnValue += '<li>è subentrato il <strong>'+data['datasub']+'</strong></li>';
        } else if ( existsAndNotEmpty(data['datapresub']) ) {
            returnValue += '<li>è in presubentro dal <strong>'+data['datapresub']+'</strong></li>';
        }

        return returnValue + '</ul>';
    }


    function existsAndNotEmpty(value) {
        if (typeof value != 'undefined' && value.length > 0) {
            return true;
        }
        return false;
    }
});