3
respostas

Estrutura tabela para json

Preciso estrutura uma informação que vem data tabela usando TypeScript.

{  id: "1",  name: "Category 01",  parentId: "0" },
{  id: "2",  name: "Category 02",  parentId: "1" },
{  id: "3",  name: "Category 03",  parentId: "2" },
{ id: "4",  name: "Category 04",  parentId: "2" },

para:

{
  "data": [
    {
      "data": {
        "id": "1",
        "name": "Category 01",
        "parentId": "0"
      },
      "children": [
        {
          "data": {
            "id": "2",
            "name": "Category 02",
            "parentId": "1"
          },
          "children": [
            {
              "data": {
                "id": "3",
                "name": "Category 03",
                "parentId": "2"
              }
            },
            {
              "data": {
                "id": "4",
                "name": "Category 04",
                "parentId": "2"
              }
            }
          ]
        }
      ]
    }
  ]
}
3 respostas

Fala ai Ricardo, tudo bem? Desculpe mas eu não entendi o problema/dúvida.

  • O que você são cada estrutura?
  • Qual é o retorno da API?
  • O que precisa fazer com elas?

Consegue me passar mais detalhes para que eu possa tentar lhe ajudar?

Fico no aguardo.

Matheus, boa noite! Eu tenho uma tabela que tem as colunas id, nome e parentId onde eu preciso de uma estrutura de árvore. Essa estrutura irei utilizar em um componente em Angular (9). Minha tabela está assim:

categorias: Categoria[] = [
    {  id: "1",  name: "Category 01",  parentId: "0" },
    {  id: "2",  name: "Category 02",  parentId: "1" },
    {  id: "3",  name: "Category 03",  parentId: "2" },
{ id: "4",  name: "Category 04",  parentId: "2" }
];

E preciso que fique assim:

{
  "data": [
    {
      "data": {
        "id": "1",
        "name": "Category 01",
        "parentId": "0"
      },
      "children": [
        {
          "data": {
            "id": "2",
            "name": "Category 02",
            "parentId": "1"
          },
          "children": [
            {
              "data": {
                "id": "3",
                "name": "Category 03",
                "parentId": "2"
              }
            },
            {
              "data": {
                "id": "4",
                "name": "Category 04",
                "parentId": "2"
              }
            }
          ]
        }
      ]
    }
  ]
}

Fala ai Ricardo, o que deu para fazer nesse tempo foi algo assim:

const createTree = data => data
    .map(item => ({
        data: item,
        children: data.filter(i => i.parentId === item.id)
    }))
    .filter(item => item.children.length)
    .map((item, i, partial) => ({
        ...item,
        children: item.children.map(c => partial.find(p => p.data.id === c.id))
    }))

Para chamar a função você passa o array de Categoria, ela vai devolver uma árvore.

Nesse implementação ela só vai até o segundo nível, para que ela navegue mais profundamente precisa aplicar recursão e alguns ajustes.

Mas, a ideia é mais ou menos essa.

O código pode ser muito melhor e mais performático, mas dado o tempo foi isso que deu para bolar.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software