How do I add items to json array in ionic 4

Question

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

What's the issue exactly? You're pushing a new item to the array with 2 keys, looks to be working as intended. — Phix
– Phix, Commented Oct 21, 2019 at 18:43
I wish to push inside the selected {question} object and add the new item if this is possible. — Thomas Degroot
– Thomas Degroot, Commented Oct 21, 2019 at 18:46

Tomas Vancoillie · Accepted Answer · 2019-10-21 19:36:08Z

1

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';
}

answered Oct 21, 2019 at 19:36

Tomas Vancoillie

3,8682 gold badges36 silver badges51 bronze badges

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

1 Comment

Tomas Vancoillie Over a year ago

Happy to help, happens to everyone now and then ;)

Amir Christian · Accepted Answer · 2019-10-21 18:49:43Z

1

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);
}

answered Oct 21, 2019 at 18:49

Amir Christian

5956 silver badges20 bronze badges

1 Comment

Thomas Degroot Over a year ago

Thats not what i am trying to accomplish. I do not want to add another question. I wish to add to the existing question. But thank for replying :)

Collectives™ on Stack Overflow

How do I add items to json array in ionic 4

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related