Cannot find a differ supporting object '[object Object]' of type 'object' in angular 6

Question

I'm new to angular 6. I want to display the contents as key (key as label name ) and value in select options. I'm able to get JsonObject from restcontroller but unable to process in angular. here is my code.

import { MapHeader } from '../../models/mapheader';
headerMapper(){
    this.clientService.getHeaders().subscribe(
        res => {
            console.log(res.json());
            this.mapper = Array.of(res.json());
            console.log(this.mapper);
            this.ismapped = false;
        }
    );
}

mapperheader.ts

export class MapHeader {
    public AOV: string;
    public budget: string;
    public CPO: string;
}

.html

<div>
    <form *ngFor="let map of mapper">
        <mat-form-field>
            <mat-select placeholder="{{map}}">
                <!--<mat-option>None</mat-option>-->
                <mat-option *ngFor="let option of map" [value]="option">{{option}}</mat-option>
            </mat-select>
        </mat-form-field>
    </form>
</div>

console.log(res.json()) prints the below

Object
AOV:
(19) ["sessions", "Budget", "CTR"]
CPC:
(19) ["sessions", "Budget", "CTR"]
CPO:
(19) ["sessions", "Budget", "CTR"]

console.log(this.mapper) this prints the below

 Array(1)
    0:
    AOV:
    (19) ["sessions", "Budget", "CTR"]
    CPC:
    (19) ["sessions", "Budget", "CTR"]
    CPO:
    (19) ["sessions", "Budget", "CTR"]

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3138)
    at checkAndUpdateDirectiveInline (core.js:9251)
    at checkAndUpdateNodeInline (core.js:10512)
    at checkAndUpdateNode (core.js:10474)
    at debugCheckAndUpdateNode (core.js:11107)
    at debugCheckDirectivesFn (core.js:11067)
    at Object.eval [as updateDirectives] (AddNewClientComponent.html:47)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11059)
    at checkAndUpdateView (core.js:10456)
    at callViewAction (core.js:10697)
View_AddNewClientComponent_3 @ AddNewClientComponent.html:45

Expected result

AOV as label and sessions,ctr,budget as select option

Answer 1

You need to process your response in order to have an array as output:

   import { MapHeader } from '../../models/mapheader';
    headerMapper(){
        this.clientService.getHeaders().pipe(map(res => res.json())).subscribe(
            res => {
                console.log(res.json());
                this.mapper = Object.keys(res).map( elm => {elm : res[elm]}) ;
                console.log(this.mapper);
                this.ismapped = false;
            }
        );
    }