Percorrendo um array de objetos recursivamente

[vitocaio]

Opa, to tendo um problema com uma função e gostaria de um help!, estou tentando percorrer um Array de Objetos, porém ele possui varios childrens, exp:

{
  "id": 33,
  "key": "catalog.teste",
  "name": "Teste",
  "groups": [
    {
      "name": "N1",
      "fields": [
        {
          "id": 1524,
          "key": "catalog.teste.crm_ticket.id_ticket",
          "name": "ID_TICKET",
          "type": "N"
        },
        {
          "id": 1525,
          "key": "catalog.teste.crm_ticket.dt_start",
          "name": "DT_START",
          "type": "T"
        }
      ],
      "groups": [
        {
          "name": "N2",
          "fields": [
            {
              "id": 1526,
              "key": "catalog.teste.crm_ticket.id_person",
              "name": "ID_PERSON",
              "type": "N"
            },
            {
              "id": 1527,
              "key": "catalog.teste.crm_ticket.id_users",
              "name": "ID_USERS",
              "type": "N"
            }
          ],
          "groups": [
            {
              "name": "N3",
              "fields": [
                {
                  "id": 1528,
                  "key": "catalog.teste.crm_ticket.id_userlocked",
                  "name": "ID_USERLOCKED",
                  "type": "N"
                },
                {
                  "id": 1529,
                  "key": "catalog.teste.crm_ticket.dt_locked",
                  "name": "DT_LOCKED",
                  "type": "T"
                }
              ],
              "groups": [
                {
                  "name": "Nome grande para teste de layout",
                  "fields": [
                    {
                      "id": 1532,
                      "key": "catalog.teste.crm_ticket.teste.ds_ticket",
                      "name": "Descrição campo grande para teste de layout",
                      "type": "N"
                    },
                    {
                      "id": 1533,
                      "key": "catalog.teste.crm_ticket.teste.id_ticket",
                      "name": "Outro campo com descrição  grande para teste de layout",
                      "type": "N"
                    }
                  ],
                  "groups": []
                }
              ]
            },
            {
              "name": "N3_1",
              "fields": [
                {
                  "id": 1563,
                  "key": "catalog.teste.crm_ticket.ds_ticket.n3_1",
                  "name": "DS_TICKET",
                  "type": "G"
                },
                {
                  "id": 1564,
                  "key": "catalog.teste.crm_ticket.id_ticket.n3_1",
                  "name": "ID_TICKET",
                  "type": "G"
                }
              ],
              "groups": []
            }
          ]
        }
      ]
    },
    {
      "name": "NN1",
      "fields": [
        {
          "id": 1530,
          "key": "catalog.teste.crm_ticket.ds_ticket",
          "name": "DS_TICKET",
          "type": "G"
        }
      ],
      "groups": [
        {
          "name": "X",
          "fields": [],
          "groups": [
            {
              "name": "Y",
              "fields": [
                {
                  "id": 1531,
                  "key": "catalog.teste.crm_ticket.x.y.id_ticket",
                  "name": "ID_TICKET",
                  "type": "N"
                },
                {
                  "id": 1593,
                  "key": "catalog.teste.crm_ticket.x.y.ds_ticket",
                  "name": "DS_TICKET",
                  "type": "N"
                }
              ],
              "groups": []
            }
          ]
        }
      ]
    }
  ],
  "fields": []
}

Teórica mente eu teria que transformar isto em uma tree view, sem o uso de componentes ou bibliotecas, posso usar Jquery ou Javascript puro mesmo.

Alguém me da um help!?

[fabricionaweb]

Você consegue fazer isso usando reduce.

Caso exista "groups" você extrai e joga pro fim do array, assim vai rolar recursivamente até o fim...

Tenta ai :)

[expalmer]

Isso é trabalho para uns map, filter, reduce como disse nosso amigo @fabricionaweb .
Tenho uns posts sobre isso se for útil pra ti. Map e Filter
Reduce
Caso precise percorrer um objeto, precisa usar Object.keys

[vitocaio]

São de grande ajuda essas dicas, mas o que mais me empaca, é que o array é dinâmico, não sei quantos groups pode conter nele, por exemplo, posso ter uma arvore de grupos gigante, grupo dentro de grupo sem limites, quando eu transformar isto em uma tree view, tenho que ilustrar tudo isto.

[viniciuslacerda]

Não sei se é exatamente a resposta que tu precisa. Mas tem esse ótimo vídeo
do fun fun function sobre recursividade, em que ele mostra no exemplo como
percorrer um array com filhos dentro de filhos e dar um flat nesse array.
Segue o vídeo: https://www.youtube.com/watch?v=k7-N8R0-KY4

Aproveito pra recomendar o canal do cara pra quem curte JS.

2016-08-09 10:33 GMT-03:00 vitocaio [email protected]:

São de grande ajuda essas dicas, mas o que mais me empaca, é que o array é
dinâmico, não sei quantos groups pode conter nele, por exemplo, posso ter
uma arvore de grupos gigante, grupo dentro de grupo sem limites, quando eu
transformar isto em uma tree view, tenho que ilustrar tudo isto.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#275 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQ5-1c9TsnrYPCQyj2TNUwRq6I6EHBEYks5qeIGygaJpZM4JffU9
.

[expalmer]

Isso é uma questão de entender o mecanismo do teu sistema, deve ter alguma lógica (padrão), vai ter que testar se no objeto tem algum filho do tipo "tal". Até porque se não houver uma lógica e teu objeto mudar de forma totalmente aleatório, você vai precisar criar um sistema cognitivo.
Tenta colocar alguns exemplos de entrada e saída de como queres. Exemplo: O objeto chegou "assim", e eu quero que fique "assado".

[vitocaio]

Sim ele possui um padrão, basicamente ele contem a mesma estrutura em cada filho, eu teria apenas que verificar sempre que tem um groups que contém algo dentro, percorrer ele e mostrar na tela.

[vitocaio]

Vlw @viniciuslacerda vou ver sim!