samedi 7 septembre 2019

display checkbox based on object response Angular

I want to create dynamic checkbox based on object response,It should create multiple checkbox based on this response:

test.json

[  
  {  
   "header":{  
      "serviceId":"inquiry-service",
      "productCode":"JPJXXX",
      "transactionId":"cfad2ac7c16XXX"
   },
   "data":{  
      "items":[  
         {  
            "offenceType4":"",
            "permSpeed":"110",
            "actSpeed":"123",
            "itemAttributes":{  
               "attribute5":"",
               "attribute4":"VQ3XXX",
               "attribute7":"14.21.00",
               "attribute6":"2018-03-22",
               "attribute1":"XXXXX",
               "attribute3":"XXXXXX",
               "attribute2":"XXXXXX"
            },
            "offenceLoc":"XXXXXX",
            "itemNo":"1",
            "summonDate":"2018-04-02",
            "distCode":"XXXXXX",
            "summonType":"2",
            "hbtlOffndr":"N",
            "itemAmount":15000,
            "itemAttributesCount":7,
            "summonAmt":"150.00",
            "offenceType1":"48",
            "offenceCode1":"XXXXXX",
            "offenceType2":"",
            "offenceCode2":"",
            "offenceType3":"",
            "category":"4",
            "offenceCode3":"",
            "offenceCode4":"",
            "respCode":"XXXXXX"
         },
         {  
            "offenceType4":"",
            "permSpeed":"110",
            "actSpeed":"123",
            "itemAttributes":{  
               "attribute5":"",
               "attribute4":"XXXXXX",
               "attribute7":"10.13.31",
               "attribute6":"2018-06-16",
               "attribute1":"XXXXXX",
               "attribute3":"XXXXXX",
               "attribute2":"XXXXXX"
            },
            "offenceLoc":"XXXXXX",
            "itemNo":"2",
            "summonDate":"2018-07-23",
            "distCode":"XXXXXX",
            "summonType":"2",
            "hbtlOffndr":"N",
            "itemAmount":15000,
            "itemAttributesCount":7,
            "summonAmt":"150.00",
            "offenceType1":"48",
            "offenceCode1":"XXXXXX",
            "offenceType2":"",
            "offenceCode2":"",
            "offenceType3":"",
            "category":"4",
            "offenceCode3":"",
            "offenceCode4":"",
            "respCode":"XXXXXX"
         }
      ],
      "status":{  
         "code":"",
         "message":""
      },
      "additionalProperties":{  
         "serviceFee":0,
         "total":0,
         "deliveryFee":0,
         "foreignCardSurcharge":0,
         "serviceFeeTax":0,
         "subTotal":0,
         "deliveryFeeTax":0
      },
      "metadata":{  
         "count":2
      }
   },
   "status":{  
      "code":"200",
      "message":"OK"
   }
}
]

what I want is checkbox to be created based on data.items if items consist of 2 arrays, it should create 2 checkboxes.then selected checkboxes can be submit and it need header.transactionId, if I filter and only got data.items how could I add header.transactionId when submit.

I had created demo stackblitz and this is what I had tried:

Ts File

  receivedSummons: SummonModel[];
  selectedSummon: string;
  form: FormGroup;

  constructor(
    private inquiryStore: InquiryStoreService,
    private formBuilder: FormBuilder
  ) {
    this.form = this.formBuilder.group({
      receivedSummons: new FormArray([], minSelectedCheckboxes(1))
    });
   }

  ngOnInit() {
    this.getReceivedSummons();
  }

  getReceivedSummons() {
      this.inquiryStore.summons$.subscribe(receivedSummons => {
      this.receivedSummons = receivedSummons;
      this.addCheckboxes();
    })
  }

  addCheckboxes() {
    this.receivedSummons.map((i) => {
      const control = new FormControl;
      (this.form.controls.receivedSummons as FormArray).push(control);
    });
  }

  submitSelectedCheckboxes() {
    this.selectedSummon = this.form.value.receivedSummons
      .map((v, i) => (v ? this.receivedSummons[i] : null))
      .filter(v => v !== null);
      console.log(this.selectedSummon)
  }

}

Html File

<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
  <label formArrayName="receivedSummons" *ngFor="let summon of form.controls.receivedSummons.controls; let i = index">
    <input type="checkbox" [formControlName]="i">
  </label>
  <div *ngIf="!form.valid">At least one order must be selected</div>
  <br>
  <button [disabled]="!form.valid">submit</button>
</form>

I could use some guidance and suggestion on how to solve this.




Aucun commentaire:

Enregistrer un commentaire