0

Preciso listar todas as subcategorias em uma tabela e não estou sabendo como fazer isso.

{
    "message": [
        {
            "category_id": 1,
            "shop_id": 1,
            "category_name": "Bebidas",            
            "status_cat_css": 0,
            "status_cat_active": 1,
            "sub_categories": [
                {
                    "sub_category_id": 1,
                    "category_id": 1,
                    "sub_category_name": "sucos",
                    "datecreate": "2019-02-04 18:57:25",
                    "dateupdate": "2019-02-04 18:57:25",
                    "status": 1
                },
                {
                    "sub_category_id": 6,
                    "category_id": 1,
                    "sub_category_name": "refrigerante",
                    "datecreate": "2019-02-04 19:23:17",
                    "dateupdate": "2019-02-04 19:23:17",
                    "status": 1
                }
            ]
        },
        {
            "category_id": 2,
            "shop_id": 1,
            "category_name": "Pratos",
            "status_cat_css": 0,
            "status_cat_active": 1,
            "sub_categories": [
                {
                    "sub_category_id": 2,
                    "category_id": 2,
                    "sub_category_name": "individuais",
                    "datecreate": "2019-02-04 18:57:25",
                    "dateupdate": "2019-02-04 18:57:25",
                    "status": 1
                }
            ]
        },
        {
            "category_id": 3,
            "shop_id": 1,
            "category_name": "Porções",
            "status_cat_css": 0,
            "status_cat_active": 1,
            "sub_categories": [
                {
                    "sub_category_id": 4,
                    "category_id": 3,
                    "sub_category_name": "completa",
                    "datecreate": "2019-02-04 18:57:59",
                    "dateupdate": "2019-02-04 18:57:59",
                    "status": 1
                }
            ]
        },
        {
            "category_id": 4,
            "shop_id": 1,
            "category_name": "Entradas",
            "status_cat_css": 0,
            "status_cat_active": 1,
            "sub_categories": [
                {
                    "sub_category_id": 3,
                    "category_id": 4,
                    "sub_category_name": "salada",
                    "datecreate": "2019-02-04 18:57:59",
                    "dateupdate": "2019-02-04 18:57:59",
                    "status": 1
                }
            ]
        },
        {
            "category_id": 5,
            "shop_id": 1,
            "category_name": "Sobremesas",
            "status_cat_css": 0,
            "status_cat_active": 1,
            "sub_categories": [
                {
                    "sub_category_id": 5,
                    "category_id": 5,
                    "sub_category_name": "doces",
                    "datecreate": "2019-02-04 18:58:14",
                    "dateupdate": "2019-02-04 18:58:14",
                    "status": 1
                }
            ]
        },
        {
            "category_id": 14,
            "shop_id": 1,
            "category_name": "Cafés",
            "status_cat_css": 0,
            "status_cat_active": 1,
            "sub_categories": []
        }
    ],
    "count": 6,
    "error": false,
    "statuscode": 200
}
<tbody>
  <tr *ngFor="let item of listSubCateg">
    <td>{{item.sub_category_name}}</td>
    <td>{{item.category_name}}</td>    
  </tr>
</tbody>

2
  • E qual a dificuldade?
    – LeAndrade
    Commented 10/03/2019 às 17:30
  • @LeAndrade, eu quero listar todas as subcategorias, dessa forma como estou executando o ngFor, não está trazendo nenhum... Commented 10/03/2019 às 18:44

1 Resposta 1

2

Se o seu objeto listSubCateg é o array "message" mostrado na estrutura de sua pergunta então cada item do seu ngFor é um objeto que contém um array de outros objetos na variável "sub_categories". Uma forma rápida de visualizar sua estrutura de dados seria:

<tbody *ngFor="let item of listSubCateg">
    <tr *ngFor="let sub of item.sub_categories">
    <td>{{sub.sub_category_name}}</td>
    <td>{{item.category_name}}</td>  
    </tr>
</tbody>

Porém NÃO aconselho dessa forma pois você estaria repetindo a tag tbody, esse é apenas um exemplo pra você entender melhor o funcionamento do ngFor.

A solução ideal seria no seu arquivo typescript transformar essa estrutura em uma mais simples.

public novaEstrutura = [];
...
this.listSubCateg.forEach(category => {
    category.sub_categories.forEach(subcategory => {
        this.novaEstrutura.push(
            {
                categoria: category.category_name,
                subcategoria: subcategory.sub_category_name
            }
        );
    })
});

Dessa forma o ngFor no html ficaria assim:

<tbody>
    <tr *ngFor="let item of novaEstrutura">
        <td>{{item.categoria}}</td>
        <td>{{item.subcategoria}}</td>  
    </tr>
</tbody>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .