How can I split the array when it comes to the letter I want in the alphabet, with Angular?

Question

I want to make something like this:

"ABCDEF", "GHIJK", "LMNO", "PRSTU", "VYZXWQ", "0123456789"

I have a sequence in alphabetical order; Names with first letters "ABCDEF" must occur in one array and another array with "GHIJK"

I don't know how I can do it.

My returning data:

    [
    {
        "publishDate": "02.08.2022",
        "jobs": [
            {
                "mediaName": "GERCEKTARAF.COM",
                "ids": [
                    {
                        "id": "62ebea1fasfascbd755d317d1ffc9c",
                        "isLocked": false
                    }
                ]
            },
            {
                "mediaName": "MEDYAGAZETE.COM",
                "ids": [
                    {
                        "id": "62ec1asdddc0e45625ab485f38a5",
                        "isLocked": false
                    }
                ]
            },
            {
                "mediaName": "FINANS.GAZETEVATAN.COM",
                "ids": [
                    {
                        "id": "62ecasdasd1dbfe45625ab485f382c",
                        "isLocked": false
                    },
                    {
                        "id": "62ec1dasdasdfc0e45625ab485f3897",
                        "isLocked": false
                    }
                ]
            }
        ]
    }
  ]

(I need to sort my MediaNames in my order, don't confuse with PublishDate, they are for that day only. The important thing is the mediaNames under the job array.)

Here is my code;

ts side:

   getJobsForInternet() {

        this.sidenavService.getInternetJobs().subscribe((jobs: any) => {

            jobs.forEach(getInternetJobs => {

                getInternetJobs.jobs.sort((a, b) => {

                    let _a = a.mediaName
                    let _b = b.mediaName

                    return _a.toString().localeCompare(_b, 'tr', { sensitivity: 'base' });

                })

            });
            this.getJobs = jobs

            console.log(this.getJobs)
        

        });
    }

HTML side:

<nav class="dbt-tree-nav">
    <details *ngFor="let internetJobs of getJobs " class="dbt-tree-nav__item is-expandable">
        <summary class="dbt-tree-nav__item-title">{{ internetJobs.publishDate }}</summary>
        <details class="dbt-tree-nav__item is-expandable">

             ------ I wrote this part by hand for now, but it should be dynamic ------
            <summary class="dbt-tree-nav__item-title">Internet_ABCDEF</summary>
             ------ I wrote this part by hand for now, but it should be dynamic ------

            <details class="last-internet dbt-tree-nav__item is-expandable">
                <summary class="last-internet dbt-tree-nav__item-title">
                    (1) {{internetJobs.jobs.length }}
                </summary>
            </details>

        </details>
    </details>
</nav>

Answer 1

// groups
const groups = ["ABCDEF", "GHIJK", "LMNO", "PRSTU", "VYZXWQ", "0123456789"]

// initial data
const data = Array.from({ length: 100 }).map(() => Array.from({ length: Math.random() * 10 | 0 + 1 }).map(() => String.fromCharCode(Math.random() * 26 + 65)).join(''))

const grouped = data.reduce((acc, current) => {
  // find to which group the string belongs
  const group = groups.find(g => g.includes(current[0]))
  acc[group].push(current)
  return acc
}, Object.fromEntries(groups.map(g => ([g, []]))))

console.log(grouped)