Hey, I have a JSON URL from which i am getting the below data,
.
I want to print “qhtext” once and it’s “qotext” below it. (Heading and it’s options)
.
Here is my code, I am using Ionic 3 need some suggestions on how to implement this logic. Thank You
Is it not displaying any data, or not displaying data the way you want it, or is it throwing an error?
Also, why are you looping on toast twice?
Your div is only rendered if tost.qotext === ''. It will never show an item with a non-empty qotext.
Here is my result, with logic of "tost.qotext === ’ ’ " it is displaying headings but it is displaying all the options in each heading. I want only those options to be displayed which are the part of that particular heading.
Without looping it twice “tost.qotext” is not displayed…
@ShadSterling Basically my logic is that print qhtext when qotext is equal to null. Its printing my headings properly.
This code is based on assumptions that qotext with empty value for every heading will be first in list.
Apply your css styling and all.
<ion-item *ngFor="let tost of toast">
<!-- This will be your heading qhtext -->
<div *ngIf="tost.qotext == ''">
{{tost.qhtext}}
</div>
<!-- This will be your data qotext -->
<div *ngIf="tost.qotext != ''">
<ion-checkbox></ion-checkbox>
<ion-label>{{tost.qotext}}</ion-label>
</div>
</ion-item>
It will be lot easier if you process your json in ts file and make new json with structure you require.
@Ankit_Makwana “It will be lot easier if you process your json in ts file and make new json with structure you require” How should i do this ?
when you are getting data from json url and storing it in this.toast variable. You can use for loop with some code in it to generate new json array to serve your purpose.
And If you can give me your json data I may be able to help you with that.
I am getting my data from the following service,
http://server10.a2zcreatorz.com/staging/projects/mobapp/Bayer/fetchOptions.php?qid=24
And by your code only headings are displayed not options
And thank you for your reply.
Sorry my mistake. Please use this instead.
<ion-item *ngFor="let tost of toast">
<!-- This will be your heading qhtext -->
<div *ngIf="tost.qotext == ''">
{{tost.qhtext}}
</div>
<!-- This will be your data qotext -->
<ion-checkbox *ngIf="tost.qotext != ''"></ion-checkbox>
<ion-label *ngIf="tost.qotext != ''">{{tost.qotext}}</ion-label>
</ion-item>
I’ve got the json data. I’ll send you the html and ts file code asap.
Thanks Buddy you just made my day, you have surely saved my job, just one more thing how do i do this with multiple radio groups.
Can you please explain, what exactly do you want?
Do you want to apply radio groups for your qotext values?
Basically in these 3 headings i want user to select any option and then to save that option from each heading that user selected. How should i do that ?
User can select only one option for one heading or multiple option?
One option from one heading…
Html file
<ion-content padding>
<button ion-button (click)="saveRad()">
Save
</button>
<ion-card *ngFor="let tost of toast">
<ion-label>
{{tost.qhtext}}
</ion-label>
<ion-list radio-group (ionChange)="radSelect($event,tost.qhtext)">
<ion-item *ngFor="let olist of tost.optionList">
<ion-radio value="{{olist}}"></ion-radio>
<ion-label>{{olist}}</ion-label>
</ion-item>
</ion-list>
</ion-card>
</ion-content>
ts file
export class HomePage {
jsonData: any;
toast: any;
temp: any;
selectedValue: any;
constructor(public navController: NavController) {
this.toast = [];
this.temp = [];
this.selectedValue = {};
this.getData();
}
getData(){
//save json data in this.jsonData , which you get from your service
//then call processJson method
this.processJson();
}
processJson(){
var count = -1;
for(var i = 0; i < this.jsonData.length; i++){
if(this.temp.indexOf(this.jsonData[i].qhtext) == -1){
count++;
this.temp.push(this.jsonData[i].qhtext);
this.toast.push(this.jsonData[i]);
this.toast[count].optionList = [];
}
if(this.jsonData[i].qotext != ''){
this.toast[count].optionList.push(this.jsonData[i].qotext);
}
}
}
saveRad(){
//Here you will get your selected radio button value for each heading
console.log(this.selectedValue);
}
radSelect(e,ev){
this.selectedValue[ev] = e;
}
}