Ionic 4 ngFor two times

i have two tables in my database. They are;
First Table : Categories ( id, name )
Second Table : Products ( id, categoryID, name, picture )

i have shared a picture for telling what i want.

i mean, in this picture;
Categories “Recent Conversations”,“Online”
Products “Recent Conversations(Finn,Han,Rey,Luke)” - Online(Poe,Ben)

how can i do this ?

Join table and see what you get
structure:

{
  "data": [
    {
      "title": "Conversion",
      "list": [
        {
          "profile": "URL",
          "name": "FOO",
          "desc": "lorem ipsum"
        },
        {
          "profile": "url",
          "name": "boo",
          "desc": "lorem ipsum"
        }
      ]
    },
    {
      "title": "Online",
      "list": [
        {
          "profile": "URL",
          "name": "FOO",
          "desc": "lorem ipsum"
        },
        {
          "profile": "url",
          "name": "boo",
          "desc": "lorem ipsum"
        }
      ]
    }
  ]
}

JSON BLOB: https://jsonblob.com/3a3fe16d-e2e3-11ea-bd71-e714806b586a

i am using phpmyadmin for mysql database, i have two tables, how can i join ?

How to Join Two Tables in MySQL

https://www.cloudways.com/blog/how-to-join-two-tables-mysql/

i know how can i do join table but i cant get output like shared picture

My suggestion is to write a mock JSON object that is in a format that you can deal with. Then write the UI code backed by that mock object. You will typically find that your first instinct wasn’t quite right, so keep iteratively changing the mock JSON object until you are happy with your component.

Then, and only then, either add a REST endpoint to your backend that delivers data in the exact format desired, or add code to the service that is responsible for managing this data in your Ionic app to massage it into that format.

how can i fill the page with ngFor ? show me please

how can i fill the page with ngFor ? show me please
you can use JSON top the page

  <ion-list *ngFor="let item of data ">
        <ion-list-header>
            {{item.title}}
        </ion-list-header>
        <ion-item *ngFor="let urun of item.list">
            {{urun.profile}}
            <br/> {{urun.name}}
            <br/> {{urun.desc}}
        </ion-item>
    </ion-list>
 {
      "title": "Conversion",
      "list": [
        {
          "profile": "URL",
          "name": "FOO",
          "desc": "lorem ipsum"
        },
        {
          "profile": "url",
          "name": "boo",
          "desc": "lorem ipsum"
        }
      ]
    },
    {
      "title": "Online",
      "list": [
        {
          "profile": "URL",
          "name": "FOO",
          "desc": "lorem ipsum"
        },
        {
          "profile": "url",
          "name": "boo",
          "desc": "lorem ipsum"
        }
      ]
    }

if i use this JSON and html code, i can handle it, but how can i create like this JSON from my 2 database table?