How to not show empty sub-objects in a js array

Question

I have my data set, and I was been able to filter it by EmployeeId from mine subobject. However, I don't want to filter those empty objects that theirs subobjects GroupedServices does not contain any items (length is 0) Here is my working example: https://jsfiddle.net/sko3y1vq/6/

function display_message(id) {
  let data = 
  [
    {
        "ServiceTypeId": 802,
        "ServiceTypeName": "Путне исправе",
        "GroupedServices": [
            {
                "Id": 5181,
                "ServiceTypeId": 802,
                "ServiceName": "Путне исправе",
                "Name": "Пасош",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 1,
                "EmployeeId": 3656
            },
            {
                "Id": 5182,
                "ServiceTypeId": 802,
                "ServiceName": "Путне исправе",
                "Name": "Преузимање пасоша",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 1,
                "EmployeeId": 3656
            },
            {
                "Id": 5227,
                "ServiceTypeId": 802,
                "ServiceName": "Путне исправе",
                "Name": "Путни лист",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 1,
                "EmployeeId": 3683
            }
        ],
        "Order": 1
    },
    {
        "ServiceTypeId": 801,
        "ServiceTypeName": "Овере докумената",
        "GroupedServices": [
            {
                "Id": 5184,
                "ServiceTypeId": 801,
                "ServiceName": "Овере докумената",
                "Name": "Наследна изјава – одрицање од наследства ",
                "Duration": 30,
                "DurationForClient": 30,
                "Order": 2,
                "EmployeeId": 3656
            },
            {
                "Id": 5183,
                "ServiceTypeId": 801,
                "ServiceName": "Овере докумената",
                "Name": "Наследна изјава - прихватање наследства",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 2,
                "EmployeeId": 3656
            },
            {
                "Id": 5186,
                "ServiceTypeId": 801,
                "ServiceName": "Овере докумената",
                "Name": "Овера копије и преписа",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 2,
                "EmployeeId": 3656
            },
            {
                "Id": 5185,
                "ServiceTypeId": 801,
                "ServiceName": "Овере докумената",
                "Name": "Сачињавање наследне изјаве и овера ",
                "Duration": 40,
                "DurationForClient": 40,
                "Order": 2,
                "EmployeeId": 3656
            }
        ],
        "Order": 2
    },
    {
        "ServiceTypeId": 800,
        "ServiceTypeName": "Матичне књиге",
        "GroupedServices": [
            {
                "Id": 5222,
                "ServiceTypeId": 800,
                "ServiceName": "Матичне књиге",
                "Name": "Закључење брака у дипломатско-конзуларном представништву",
                "Duration": 40,
                "DurationForClient": 40,
                "Order": 3,
                "EmployeeId": 3643
            },
            {
                "Id": 5225,
                "ServiceTypeId": 800,
                "ServiceName": "Матичне књиге",
                "Name": "Извод из матичне књиге рођених",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 3,
                "EmployeeId": 3656
            },
            {
                "Id": 5226,
                "ServiceTypeId": 800,
                "ServiceName": "Матичне књиге",
                "Name": "Царинска потврда",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 3,
                "EmployeeId": 3683
            }
        ],
        "Order": 3
    },
    {
        "ServiceTypeId": 805,
        "ServiceTypeName": "Визе",
        "GroupedServices": [
            {
                "Id": 5247,
                "ServiceTypeId": 805,
                "ServiceName": "Визе",
                "Name": "Виза Д",
                "Duration": 30,
                "DurationForClient": 30,
                "Order": 4,
                "EmployeeId": 3683
            },
            {
                "Id": 5254,
                "ServiceTypeId": 805,
                "ServiceName": "Визе",
                "Name": "Виза Ц",
                "Duration": 30,
                "DurationForClient": 30,
                "Order": 4,
                "EmployeeId": 3683
            }
        ],
        "Order": 4
    },
    {
        "ServiceTypeId": 804,
        "ServiceTypeName": "Држављанство",
        "GroupedServices": [
            {
                "Id": 5246,
                "ServiceTypeId": 804,
                "ServiceName": "Држављанство",
                "Name": "Отпуст из држављанства",
                "Duration": 30,
                "DurationForClient": 30,
                "Order": 5,
                "EmployeeId": 3683
            },
            {
                "Id": 5248,
                "ServiceTypeId": 804,
                "ServiceName": "Држављанство",
                "Name": "Пријем у држављанство",
                "Duration": 30,
                "DurationForClient": 30,
                "Order": 5,
                "EmployeeId": 3683
            }
        ],
        "Order": 5
    },
    {
        "ServiceTypeId": 803,
        "ServiceTypeName": "Остале услуге",
        "GroupedServices": [
            {
                "Id": 5217,
                "ServiceTypeId": 803,
                "ServiceName": "Остале услуге",
                "Name": "Прибављање документа из србије",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 6,
                "EmployeeId": 3656
            }
        ],
        "Order": 6
    }
]



 var test = data.map(({ ServiceTypeName, GroupedServices }) => {
                        GroupedServices = GroupedServices.filter(({ EmployeeId }) => EmployeeId == id );
                        return { ServiceTypeName, GroupedServices }
                    })
    //var a = test.filter(({ length }) => length == 1)
  console.log(test);
  

}

<input type="button" onclick="display_message(3683);" value="click"/>

Thanks

as you can see from the snippet for example: `"GroupedServices": []` shouldnt be there. — Stefan0309, Dec 29 '21 at 15:59
data.map(({ ServiceTypeName, GroupedServices }) => { GroupedServices = GroupedServices.filter(({ EmployeeId }) => EmployeeId == id ); return { ServiceTypeName, GroupedServices } }).filter(v => { console.warn(v); return v.GroupedServices.length>0; }) ? — mech, Dec 29 '21 at 16:09

Roko C. Buljan · Accepted Answer · 2021-12-29T16:22:00.137

Use Arry.prototype.reduce:

Reduce an Array to a subset Array
push to the accumulator array only if GroupedServices.length > 0

function display_message(id) {
  const result = data.reduce((arr, { ServiceTypeName, GroupedServices }) => {
    GroupedServices = GroupedServices.filter(({ EmployeeId }) => EmployeeId == id );
    if (GroupedServices.length > 0) arr.push({ ServiceTypeName, GroupedServices });
    return arr;
  }, []);
  console.log(result);
}

Here's a jsFiddle demo

To conclude, there's no need to iterate twice the same array, first using .map() and than using .filter(). That's why .reduce() is the best choice for such a task: creating a subset Array in one go.

score 0 · Answer 2 · answered Dec 29 '21 at 16:08

Simply check if none of these are empty and filter them after, like this:

function display_message(id) {
  let data = 
  [
    {
        "ServiceTypeId": 802,
        "ServiceTypeName": "Путне исправе",
        "GroupedServices": [
            {
                "Id": 5181,
                "ServiceTypeId": 802,
                "ServiceName": "Путне исправе",
                "Name": "Пасош",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 1,
                "EmployeeId": 3656
            },
            {
                "Id": 5182,
                "ServiceTypeId": 802,
                "ServiceName": "Путне исправе",
                "Name": "Преузимање пасоша",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 1,
                "EmployeeId": 3656
            },
            {
                "Id": 5227,
                "ServiceTypeId": 802,
                "ServiceName": "Путне исправе",
                "Name": "Путни лист",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 1,
                "EmployeeId": 3683
            }
        ],
        "Order": 1
    },
    {
        "ServiceTypeId": 801,
        "ServiceTypeName": "Овере докумената",
        "GroupedServices": [
            {
                "Id": 5184,
                "ServiceTypeId": 801,
                "ServiceName": "Овере докумената",
                "Name": "Наследна изјава – одрицање од наследства ",
                "Duration": 30,
                "DurationForClient": 30,
                "Order": 2,
                "EmployeeId": 3656
            },
            {
                "Id": 5183,
                "ServiceTypeId": 801,
                "ServiceName": "Овере докумената",
                "Name": "Наследна изјава - прихватање наследства",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 2,
                "EmployeeId": 3656
            },
            {
                "Id": 5186,
                "ServiceTypeId": 801,
                "ServiceName": "Овере докумената",
                "Name": "Овера копије и преписа",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 2,
                "EmployeeId": 3656
            },
            {
                "Id": 5185,
                "ServiceTypeId": 801,
                "ServiceName": "Овере докумената",
                "Name": "Сачињавање наследне изјаве и овера ",
                "Duration": 40,
                "DurationForClient": 40,
                "Order": 2,
                "EmployeeId": 3656
            }
        ],
        "Order": 2
    },
    {
        "ServiceTypeId": 800,
        "ServiceTypeName": "Матичне књиге",
        "GroupedServices": [
            {
                "Id": 5222,
                "ServiceTypeId": 800,
                "ServiceName": "Матичне књиге",
                "Name": "Закључење брака у дипломатско-конзуларном представништву",
                "Duration": 40,
                "DurationForClient": 40,
                "Order": 3,
                "EmployeeId": 3643
            },
            {
                "Id": 5225,
                "ServiceTypeId": 800,
                "ServiceName": "Матичне књиге",
                "Name": "Извод из матичне књиге рођених",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 3,
                "EmployeeId": 3656
            },
            {
                "Id": 5226,
                "ServiceTypeId": 800,
                "ServiceName": "Матичне књиге",
                "Name": "Царинска потврда",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 3,
                "EmployeeId": 3683
            }
        ],
        "Order": 3
    },
    {
        "ServiceTypeId": 805,
        "ServiceTypeName": "Визе",
        "GroupedServices": [
            {
                "Id": 5247,
                "ServiceTypeId": 805,
                "ServiceName": "Визе",
                "Name": "Виза Д",
                "Duration": 30,
                "DurationForClient": 30,
                "Order": 4,
                "EmployeeId": 3683
            },
            {
                "Id": 5254,
                "ServiceTypeId": 805,
                "ServiceName": "Визе",
                "Name": "Виза Ц",
                "Duration": 30,
                "DurationForClient": 30,
                "Order": 4,
                "EmployeeId": 3683
            }
        ],
        "Order": 4
    },
    {
        "ServiceTypeId": 804,
        "ServiceTypeName": "Држављанство",
        "GroupedServices": [
            {
                "Id": 5246,
                "ServiceTypeId": 804,
                "ServiceName": "Држављанство",
                "Name": "Отпуст из држављанства",
                "Duration": 30,
                "DurationForClient": 30,
                "Order": 5,
                "EmployeeId": 3683
            },
            {
                "Id": 5248,
                "ServiceTypeId": 804,
                "ServiceName": "Држављанство",
                "Name": "Пријем у држављанство",
                "Duration": 30,
                "DurationForClient": 30,
                "Order": 5,
                "EmployeeId": 3683
            }
        ],
        "Order": 5
    },
    {
        "ServiceTypeId": 803,
        "ServiceTypeName": "Остале услуге",
        "GroupedServices": [
            {
                "Id": 5217,
                "ServiceTypeId": 803,
                "ServiceName": "Остале услуге",
                "Name": "Прибављање документа из србије",
                "Duration": 20,
                "DurationForClient": 20,
                "Order": 6,
                "EmployeeId": 3656
            }
        ],
        "Order": 6
    }
]



 var test = data.map(({ ServiceTypeName, GroupedServices }) => {
                        GroupedServices = GroupedServices.filter(({ EmployeeId }) => EmployeeId == id );

                        if(GroupedServices.length && ServiceTypeName.length){                            
                               return { ServiceTypeName, GroupedServices} 
                        }
  }).filter(Boolean);
    //var a = test.filter(({ length }) => length == 1)
  console.log(test);
  

}

<input type="button" onclick="display_message(3683);" value="click"/>

How to not show empty sub-objects in a js array

2 Answers2