Data from running backend function is not same as that calling it front end. Please help!

Running backend function shows right data but when i call this function on frontend i see only the first item in the array.

Backend Code

export function getAllGroups ( ) {
return groups . listGroups ()
. then (( groupResults ) => {
return groupResults ;
})
. catch (( error ) => {
console . error ( error );
});
}
Running backend code shows 5 grps which is the right number

Frontend Code
$w . onReady ( function () {
printAllGroups ();
});

function printAllGroups ( ) {
getAllGroups ()
. then ( function ( results ) {
var groupLabel ;
for ( let index = 0 ; index < results . groups . length ; index ++) {
groupLabel = groupLabel + results . groups [ index ]. name ;
}
$w ( “#discoverErrorLog” ). text = groupLabel ;
});
}

Running client code only returns 1 group and the length of the results array is also 1 instead of 5