Angular 12 how to return an http get request array of objects and assign to other array of different-CodePudding

Hey I'm trying to implement a bootstrap5 dropdown following this example:

But actually it should look something like this, different data here:

And the second picture I get when I initialize a local array and use that:

getFoods(): ResponsibilityCode[] {
    return [
        {
            timestamp: null,
            code: 'EINKAUF',
            description: 'EINKAUFDESC',
            cancelDeletion: false,
            gruppe: 'Arbeitskreis'
        },
        {
            timestamp: null,
            code: 'blabla',
            description: 'EINKAUFDESC',
            cancelDeletion: false,
            gruppe: 'Arbeitskreis'
        },
        {
            timestamp: null,
            code: 'iwas',
            description: 'EINKAUFDESC',
            cancelDeletion: false,
            gruppe: 'Arbeitskreis'
        },
        
    ];

And here:

ngOnInit(): void {
        this.items = this.contactSearchService.getFoods().map(code => ({
            id: code.code,
            name: code.code
        } as Item));
    }