Update select dynamically with API response data

Question

I cannot get a select (drop-down menu) to update with a API response from ngfileupload (sheet names in the file uploaded). I can see the sheet names in what is returned in the browser but cannot get it "into" the select dropdown dynamically.

this.uploader.onSuccessItem=(item,response,status,headers)=>
{
  if (response)
  {
    const res:UploadDataStep1=JSON.parse(response);
    const returnDataStep1=
    {
      Url:res.Url,
      SheetNames:res.SheetNames
    };
    console.log(returnDataStep1.Url);
    // this.sheetNames=returnDataStep1.SheetNames;
    this.makeTenderStep1_Form.controls['sheetNames'].patchValue(returnDataStep1.SheetNames);
    //Input here what needs to happen with data
  }
}

and HTML:

<select class="browser-default custom-select"

          [ngClass]="{'is-invalid':makeTenderStep1_Form.get('sheetNames').errors&&
          makeTenderStep1_Form.get('sheetNames').touched}"
          formControlName="sheetNames" id="sheetNames">
            <option *ngFor="let name of sheetNames; let i = index" [value]="sheetNames[i]">
              {{name}}
            </option>
          </select>
          <ng-template #loading>Awaiting data from uploaded file...</ng-template>
          <!-- <span class="form-text text-muted">Please choose which sheet contains the relevant data (Mandatory)</span> -->
          <div class="invalid-feedback">You need to select a sheet before continuing</div>
          <div class="kt-heading kt-heading--md mt-3">c. Categorise data from file</div>

MortenNielsen · Accepted Answer · 2019-12-02 17:26:22Z

0

Found out it was a put request, so could not explicitly work with the return/response from the API (you actually can using Params, but thats a discussion for another day). Changed it to a get request instead which enabled me to work with the return data in the way i wanted.

answered Dec 2, 2019 at 17:26

MortenNielsen

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Update select dynamically with API response data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related