CODEWITHSUNDEEP
angularionic4
Thomas Degroot
Thomas Degroot

Reputation: 524

How do I add items to json array in ionic 4

I have a json array that has the following data.

  "civilWorks": [
    { 
      question: ' question 1. ', 
      radio_name: 'radio_1',
      radio_input: '',
      text_name: 'text_1',
      text_input: '',
      id: 'id1'       
    },

    { 
      question: ' Question 2.', 
      radio_name: 'radio_2',
      radio_input: '','',  
      text_name: 'text_2',
      text_input: '',
      id: 'id2'    
    }
  ]

I am trying add more text inputs by method using a button. I have been able to successfully add new questions by the addMore method, but not add to an existing question.

my html is as follows.

html 

<ion-card *ngFor="let item of form; let i=index;">
  <ion-card-content>
    <div class="question">
        {{ item.question }}
    </div>

    <ion-radio-group name="{{item.radio_name}}" [(ngModel)]="form[i].radio_input">         
      <ion-row class="radio-tags">
        <ion-item class="radio-tag" lines="none">
          <ion-label class="tag-label">compliant</ion-label>
          <ion-radio value="compliant" (click)="closeSelect(i)"></ion-radio>
        </ion-item>
        <ion-item class="radio-tagtwo" lines="none">
          <ion-label class="tag-label">non-compliant</ion-label>
          <ion-radio value="non-compliant" (click)="openSelect(i)"></ion-radio>
        </ion-item>
      </ion-row>
    </ion-radio-group>

    <div *ngIf="show[i]">
      <ion-button (click)="addMore(i)" expand="full" color="primary">Add more text boxes</ion-button><br>
      <ion-item>
          <ion-label position="floating" >Text</ion-label>
          <ion-textarea name="{{item.text_name}}" [(ngModel)]="form[i].text_input"></ion-textarea>
        </ion-item>    
    </div>
  </ion-card-content>
</ion-card>

my addMore method is as follows. I fail at drilling down into this.form and adding info the existing question.

ts

addMore(index: number){
  const newFormItem = this.form;
  newFormItem.push(
    {
      'text2_name': 'text_3',
      'text2_input': '',
    }
  );
  console.log("new items", newFormItem);
}

image of the log output

image of log file

Upvotes: 0

Views: 2182

Answers (2)

Tomas Vancoillie
Tomas Vancoillie

Reputation: 3878

Your form is a JS Object, not a JSON. As seen from your JSON output, the form is typed as an array of objects (object[]). You can add new key-value pairs to the object array at the index position.

addMore(index: number){
  // bracket notation
  this.form[index]['text2_name'] = 'text_3';
  // dot notation
  this.form[index].text2_name = 'text_3';
}

Upvotes: 1

Amir Christian
Amir Christian

Reputation: 595

Please take a look here: you made wrong addMore function.

<div class="question">
   {{ item.question }} // here item has question property
</div>

Change it like this, then it should work.

addMore(index: number){
  const newFormItem = this.form;
  newFormItem.push(
    { 
      question: ' Question 3.', 
      radio_name: 'radio_3',
      radio_input: '','',  
      text_name: 'text_3',
      text_input: '',
      id: 'id3'    
    }
  );
  console.log("new items", newFormItem);
}

Upvotes: 1

Related Questions