Angular / how can i convert fetched data from string to array

Question

i have edit form in dialog, but api data for select i am receiving is in string not array so i get this error:

Error: Value must be an array in multiple-selection mode.

campaign.ts

  ngOnInit(): void {
    this.fetchdata();
  }

  fetchdata() {
    this.campaignService.sendGetRequest()
    .subscribe((data: any[])=>{
      this.campaigns = data;
    })
  }

  onEdit(item){
    this.campaigns.findIndex(i => i.id == item.id);
    const dialogRef = this.dialog.open(EditComponent,{
          data: item
        });
  }

edit.ts

this.editForm = this.fb.group({
  Name: this.data.name,
  SmsText: [this.data.smsText,  [Validators.required]],
  SmsSendDate: [this.data.smsSendDate,  [Validators.required]],
  SmsSendHoursRange: this.fb.group({
    start: [this.data.smsSendHoursRange.start,  [Validators.required]],
    end: [this.data.smsSendHoursRange.end,  [Validators.required]],
  }),
  Branch: [this.data.branch],
  InspectionResult: [this.data.inspectionResult],
  Categories: [this.data.categories],
  DateOfIssue: [this.data.dateOfIssue],
  Brand: [this.data.brand],
  VehicleCategory: [this.data.vehicleCategory],
  OwnerStatus: [this.data.ownerStatus],
  IsPhys: [this.data.isPhys],
  IsJRDC: [this.data.isJRDC]
});

// get centers
this.campaignService.getCenters().subscribe((data: any[])=>{
  this.centers = data;
})
// get vehicles
this.campaignService.getCategories().subscribe((data: any[])=>{
  this.categories = data;
})

edit.html

  <div class="column">
    <mat-form-field appearance="fill">
      <mat-label>Car category</mat-label>
      <mat-select multiple formControlName="Categories">
        <mat-option *ngFor="let item of categories" [value]="item.id">{{item.description}}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
<div class="columns">
  <mat-form-field appearance="fill">
    <mat-label>Centers</mat-label>
    <mat-select multiple formControlName="Branch">
      <mat-option *ngFor="let item of centers" [value]="item.centerCode">{{item.address}}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

this is api response which i want to convert in array for select

branch: "G25,G22"
brand: "OPEL, SUBARU"
inspectionResult: "1"
...............

Dano · Accepted Answer · 2021-02-09 20:47:03Z

2

In javascript there is a function split(separator), which splits a string into an array by the separator.

So in your case, when you construct the formGroup, you would set, for instance:

Branch: [this.data.branch.split(',')],

answered Feb 9, 2021 at 20:47

Dano

2641 silver badge5 bronze badges

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

2 Comments

zaqwsx Over a year ago

Hey thanks for your answer it works! one more question, sometimes some data will be empty so i get this error: Cannot read property 'split' of null

Dano Over a year ago

Quick solution: (this.data.branch || '').split(','), or longer and handling just nulls this.data.branch !== null ? this.data.branch.split(',') : [].

Bob · Accepted Answer · 2021-02-09 20:44:35Z

/**
  split the input in lines (\n) then for each line
  extract on array assuming that the key name is composed with only non-space characters
  that in the right hand side there are no escaped quotes and that `,` is always an item 
  separator.
  returns {Map<string, string[]>}
*/
function parseResponse(s){
  const keyValue = /\s*(\S+?)\s*:\s*"(.*?)"\s*/
  const result = {}
  const LINE_SEPARATOR = '\n'
  for(line of s.split(LINE_SEPARATOR)){
    const match = line.match(keyValue)
    if(match){
      result[match[1]] = match[2].split(',').map((s) => s.trim())
    }
  }
  return result;
}

For the three first lines of your example it gives.

{
  branch: [ 'G25', 'G22' ],
  brand: [ 'OPEL', 'SUBARU' ],
  inspectionResult: [ '1' ]
}

Lines that don't match are ignored (fails silently)

Collectives™ on Stack Overflow

Angular / how can i convert fetched data from string to array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related