Como usar SelectItemGroup (PrimeNG) com json vindo da API

Front-end
#1

bom dia, gostaria de dicas de como usar o componet SelectItemGroup do PrimeNG a documentação não foi o suficiente pra tentar implementar o meu caso

https://www.primefaces.org/primeng/showcase/#/multiselect

ts
component.ts.jpg786×490 48.3 KB
service
service.jpg926×564 63.9 KB

#2

Pq não funcionou? Dá algum erro ou os elementos não estão aparecendo?

Evite mandar imagens. No seu caso, mandar o código seria bem melhor, pois fica mais fácil de tentar simular.

1 curtida
#3

bom dia lucas, valeu pela dica, na próxima mando texto.

entao, de acordo com a documentação do primeNG

https://www.primefaces.org/primeng/showcase/#/multiselect

eu devo por os meus dados dentro de uma lista do tipo SelectItemGroup[];

import { SelectItem } from './selectitem';

export interface SelectItemGroup {

    label: string;

    value?: any;

    items: SelectItem[];

}
#4

a questao é que nao to conseguindo tranformar a minha lista this.cursoSetorList

em uma lista do tipo SelectItemGroup [] nem to sabendo qual a melhor forma de fazer isso, gostaria de saber qual estrategia posso usar pra usar esse componente quando as informacoes vem da api

#5

Não vi no exemplo o uso de SelectItem, apenas do SelectItemGroup. Pelo que vi, basta vc declarar e atribuir o json.

Mas antes, qual o valor está chegando em this.cursos?
E como fica o valor em this.groupedCurso após o forEach?

#6

então lucas, a minha API trás pra mim as informações nesse formato

buscaCursos() {

    const url = `${environment.API}/public/cursos-setores`;

    return this.http.get(url)

  }
#7 
[
    {
        "idCurso": 1091,
        "dsCurso": "ACUPUNTURA TRADICIONAL",
        "idPai": 1173,
        "dsSigla": "AT"
    },
    {
        "idCurso": 1020,
        "dsCurso": "ADAPTACOES CURRICULARES E PRATICAS AVALIATIVAS INCLUSIVA",
        "idPai": 1171,
        "dsSigla": null
    },
    {
        "idCurso": 801,
        "dsCurso": "Administração",
        "idPai": 1163,
        "dsSigla": null
    },
    {
        "idCurso": 1,
        "dsCurso": "Administração",
        "idPai": 1163,
        "dsSigla": null
    },
    {
        "idCurso": 1026,
        "dsCurso": "ADMINISTRACAO FINANCEIRA",
        "idPai": 1163,
        "dsSigla": "EAF"
    }

]
#8

observe que o SelectItemGroup necessita que os objetos tenham um formato de arvore, obedecendo uma hieraquia como se fosse uma arvore, é isso que esse metodo

arrayToTreeService.arraytoTree faz ele formata minha lista e me da um json ja formatado

#9

Isso eu entendi, mas o valor do this.cursos, logo aṕos o respose ser tratado pelo arrayToTreeService é esse json ai que tu mandou?