list multiple ngFor arrays

Question

I need to list all subcategories in a table and I’m not sure how to do this.

{
    "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>

Answer 1

If your object listSubCateg is the "message" array shown in the structure of your question then each item your ngFor is an object that contains an array of other objects in the "sub_categories" variable. A quick way to visualize your data structure would be:

<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>

However NAY I advise this way because you would be repeating the tag tbody, this is just an example for you to better understand the operation of ngFor.

The ideal solution would be in your file typescript turn this structure into a simpler.

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

That way ngFor in html would look like this:

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