How to display nested object using ui-select's group by property

Question

So i have an ui select component that displays a list of object that have several properties, one property is another object, what I need is to display the array´s objects grouped by a property in the nested object, look: image. Please I really need help on this one. Thanks in advance. This is why I tried:

<ui-select-match placeholder="Elija un Nutriente...">           
    {{$select.selected.nombre}}
</ui-select-match>
<ui-select-choices repeat="a in allNutrientes| filter: $select.search" group-by="'idTiposDatosAlimentos.nombreTipoDato'"> 
    <strong>{{a.abreviatura}} </strong>
      {{a.nombre}}
    <small><strong>Tipo de Dato: </strong>
      {{a.idTiposDatosAlimentos.nombreTipoDato}}
    </small>
</ui-select-choices>

To get you started, you can check out the ui select examples. — Tyler
– Tyler, Commented May 3, 2018 at 17:33
I did man, but in the examples they only group by properties in an array, not but properties in a nested array. so it doesnt work for me, i tried some stuff though, but didnt worked either, plus Im just an student and Im new to angular so I dont code very well, thats why Im asking for help here — Alberto
– Alberto, Commented May 3, 2018 at 17:39
Can you add your attempt, this way I'm not duplicating what you have already tried? — Tyler
– Tyler, Commented May 3, 2018 at 17:40

Tyler · Accepted Answer · 2018-05-03 18:03:27Z

1

You are using the group by string method available with ui select. However, they also have an example that allows you to use a function. You can just add a function to your controller, and replace your group-by= attribute with the function name. This works by passing each item in to your function, so that function should except a single parameter of that item. For your case, you can just simply return the value from the field you would like to group by.

yourcontroller.js

// the rest of your controller code, left out for brevity
$scope.groupByNombreTipoDato = function (item) {
    // by returning this, it will attach this as the group by key
    // and automatically group your items by this
    return item.idTiposDatosAlimentos.nombreTipoDato;
}

yourhtml.html

// rest left out for brevity
// we are using the function we added to the controller
// we don't include the parameter, it calls it properly with just the name
<ui-select-choices repeat="a in allNutrientes| filter: $select.search" group-by="groupByNombreTipoDato">

answered May 3, 2018 at 18:03

Tyler

1,0491 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alberto Over a year ago

Is perfect, it worked, again thanks for your patience and time PS: I upvoted your answer but Im not 15 reputation yet so it wont be displayed

Collectives™ on Stack Overflow

How to display nested object using ui-select's group by property

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related