Question 110036 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – How do I display data from a get request to show within an option tag?

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" class="form-select" 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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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 ! ╰(°▽°)╯

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search