I have a get request that retrieves data from a REST API. Below is the response.

{
    "listCustomFields": [
        {
            "configurationType": null,
            "errorDetails": null,
            "fieldId": "312329",
            "listItems": [
                "Banking Services",
                "Business Banking",
                "Commercial",
                "Consumer Lending"
            ],
            "name": "Department Name",
            "required": "true",
            "show": "true",
            "value": null
        },
        {
            "configurationType": null,
            "errorDetails": null,
            "fieldId": "373914",
            "listItems": [
                "BB Account Servicing - Add/delete signer",
                "BB Account Servicing - Online Banking for Business - Add Business Account Form",
                "BB Lending - Express Business Credit Application"
            ],
            "name": "Documents being sent",
            "required": "false",
            "show": "true",
            "value": null
        }
    ],
    "textCustomFields": [
        {
            "configurationType": null,
            "errorDetails": null,
            "fieldId": "355485",
            "name": "Account Number",
            "required": "true",
            "show": "true",
            "value": null
        },
        {
            "configurationType": null,
            "errorDetails": null,
            "fieldId": "418149",
            "name": "Obligor Number",
            "required": "false",
            "show": "true",
            "value": null
        },
        {
            "configurationType": null,
            "errorDetails": null,
            "fieldId": "418150",
            "name": "Business Name",
            "required": "false",
            "show": "true",
            "value": null
        },
        {
            "configurationType": null,
            "errorDetails": null,
            "fieldId": "418151",
            "name": "System of Record",
            "required": "false",
            "show": "true",
            "value": null
        },
        {
            "configurationType": null,
            "errorDetails": null,
            "fieldId": "418152",
            "name": "SSN",
            "required": "false",
            "show": "true",
            "value": null
        },
        {
            "configurationType": null,
            "errorDetails": null,
            "fieldId": "433716",
            "name": "Document Type",
            "required": "false",
            "show": "false",
            "value": null
        },
        {
            "configurationType": null,
            "errorDetails": null,
            "fieldId": "433717",
            "name": "Document Category",
            "required": "false",
            "show": "false",
            "value": null
        },
        {
            "configurationType": null,
            "errorDetails": null,
            "fieldId": "433718",
            "name": "Documsnt Sub-Category",
            "required": "false",
            "show": "false",
            "value": null
        }
    ]
}

When trying to display the listItems object within the listCustomFields Array, in an option tag the whole list is on one line.

enter image description here

Here is my call to the API

getCustomFields(): Observable<any> { return this.http.get(this.apiUrl); }

Here is my method

getCustomField(){ this.customFieldService.getCustomFields().subscribe((res) => { this.data = res; console.log(this.data); }); }

And here is my HTML

                        <select id="dropdown" name="listCustomFields"  formControlName="listCustomFields" >
              <option *ngFor="let d of data.listCustomFields; let index = index;"><ng-container  *ngIf="index===0">{{ d.listItems }}</ng-container>
              </option>
            </select>

I'm not sure what i am missing. Any help will be greatly appreciated.

CodePudding user response：

I don't have much time to give a more in-depth answer, but you have to consider that 'listItems' is an array. In order to access any singular array item, you need an index so 'd.listItems[0]' would be "Banking Services". 'd.listItems' would reference the whole array, which is probably why it shows all the entries.

I recommend another *ngFor(let x of listItems) and you can use {{x}} as one of the entries.

Also, I think your use of ng-container is a little odd. Here is how I may write this snippet:

<ng-container *ngFor="let d of data.listCustomFields; let index = index;">
     <option *ngFor="let x of d.listItems">{{x}}</option>
</ng-container>

CodePudding user response：

first please consider using pipe catchError throwError after your get request. More over please dissociate successfull and unsuccessfull response in your subscribe with next and error and/or 'complete` see https://rxjs.dev/deprecations/subscribe-arguments.

And here update version from James code removing the useless index <ng-container *ngFor="let d of data.listCustomFields"> <option *ngFor="let x of d.listItems">{{x}}</option> </ng-container>

Never declare useless variables. Have a good day ! ╰(°▽°)╯