How to unify regions with Angularjs no ngrepeat repeating records from a given field

Question

The back-end returns me a json with the records I need to show in the view. A "contract" can have more than one "demand" and when this occurs, it is repeated (in the database by another application) the registration of the contract modifying only the FK (foreign key) related to "demand". Ex.: contract X can be in demand 1,4,5 at the same time.

I use ng-repeat to show the contracts on the screen. There is a "demand" column where (by ng-class) the icon turns blue if the contract is in some demand.

Problem: As the database repeats the contract in several records changing only the demand field, these records also arrive repeated in the json. Is there any way to unify these repetitions in a single line and repeat only the demands of this contract? For example: the contract in json below is in demands 3,2 and 4. So I would like to show only once the contract and paint the 3 icons blue referring to the demands in which the same contract is related.

json (these 3 indexes below refer to the same contract, but with different demands):

4: SIG_UF: "SP"
VLR_CNTR: "30000.00"
idTipoDemanda: 3
numeroContrato: 30001

5: SIG_UF: "SP"
VLR_CNTR: "30000.00"
idTipoDemanda: 2
numeroContrato: 30001

6: SIG_UF: "SP"
VLR_CNTR: "30000.00"
idTipoDemanda: 4
numeroContrato: 30001

HTML of the icon:

<span class="inline-block">
  <i ng-class="{'mi mi--fiber-manual-record tx-primary': contrato.idTipoDemanda==3, 'mi mi--fiber-manual-record tx-grey': contrato.idTipoDemanda!=3}"></i>
                            
  <i ng-class="{'mi mi--fiber-manual-record tx-primary': contrato.idTipoDemanda==8, 'mi mi--fiber-manual-record tx-grey': contrato.idTipoDemanda!=8}"></i>

  <i ng-class="{'mi mi--fiber-manual-record tx-primary': contrato.idTipoDemanda==2, 'mi mi--fiber-manual-record tx-grey': contrato.idTipoDemanda!=2}"></i>

  <i ng-class="{'mi mi--fiber-manual-record tx-primary': contrato.idTipoDemanda==4, 'mi mi--fiber-manual-record tx-grey': contrato.idTipoDemanda !=4}"></i>
                                
  <i ng-class="{'mi mi--fiber-manual-record tx-primary': contrato.idTipoDemanda==5, 'mi mi--fiber-manual-record tx-grey': contrato.idTipoDemanda!=5}"></i>
</span>

How icons are shown:

Answer 1

One possibility I see to solve your problem is to create an array of contract objects whose key would be the contract code. Just go through the JSON you have and mount the objects as needed.

The data structure would be as follows:

[
  {
    SIG_UF: "SP",
    numeroContrato: 30001,
    VLR_CNTR: "30000.00",
    tiposDemanda: [
       2,3,4
    ]
  }
]

And the HTML would be changed to

<span class="inline-block">
  <i ng-class="{'mi mi--fiber-manual-record tx-primary': contrato.tiposDemanda.includes(3), 'mi mi--fiber-manual-record tx-grey': !contrato.tiposDemanad.includes(3)}"></i>

  <i ng-class="{'mi mi--fiber-manual-record tx-primary': contrato.tiposDemanda.includes(8), 'mi mi--fiber-manual-record tx-grey': !contrato.tiposDemanda.includes(8)}"></i>

  <i ng-class="{'mi mi--fiber-manual-record tx-primary': contrato.tiposDemanda.includes(2), 'mi mi--fiber-manual-record tx-grey': !contrato.tiposDemanda.includes(2)}"></i>

  <i ng-class="{'mi mi--fiber-manual-record tx-primary': contratotiposDemanda.includes(4), 'mi mi--fiber-manual-record tx-grey': !contrato.tiposDemanda.includes(4)}"></i>

  <i ng-class="{'mi mi--fiber-manual-record tx-primary': contrato.tiposDemanda.includes(5), 'mi mi--fiber-manual-record tx-grey': !contrato.tiposDemanda.includes(5)}"></i>
</span>

Remember to be careful when using includes, because to return true the variables must be of the same type.