I have a json file as shown below.How to display articleName as a list using angularjs and ionic.I think the json is nested one as shown below.
{"articles":[{"articleId":"2665","articleName":"<\/head>Parental leave<\/body><\/html>"}]}
<ion-list>
<ion-item button detail lines="inset" *ngFor="let film of data">
{{ film.articles.articleName }}
</ion-item
</ion-list>
i followed this tutorial
https://ionicacademy.com/fix-cors-issues-native-http/
*ngFor is a Structural Directive that lets you loop over an array.
articles is an array. You should be looping over that instead of the film which I don't think is anything in your particular context.
Considering your data is:
data = {"articles":[{"articleId":"2665","articleName":"<\/head>Parental leave<\/body><\/html>"}]}
In your template:
<ion-list>
<ion-item button detail lines="inset" *ngFor="let article of data.articles">
{{ article.articleName }}
</ion-item>
</ion-list>
you can try like this
*ngFor loop is iterate over the array of object. so here you can see that we are iterating a loop over data.articles if you want to iterate the loop over the object then you can use the keyvalue pipe
TS
let data = {"articles":[{"articleId":"2665","articleName":"<\/head>Parental leave<\/body><\/html>"}]}
HTML
<!-- with out keyvalue pipe so we are iterating a loop over the array of object -->
<ion-list>
<ion-item button detail lines="inset" *ngFor="let film of data.articles; let i = index;">
{{ film.articleName }}
</ion-item
</ion-list>
<!-- with keyvalue pipe so we are iterating a loop over object -->
<ion-list>
<ion-item button detail lines="inset" *ngFor="let film of articles | keyvalue; let i = index;">
{{ film | json}}
</ion-item>
</ion-list>
Related
So I've a problem where I want to change colors from my cards everytime a customer get subscribed to a gym class. ( Red for already subscribed, yellow when is open to subscription)
The problem I'm getting is, anytime when I make a subscription to one class, all the elements from the array, got the color red, instead of one.
So I've an array of classes(named fechaClases) which looks like this:
My HTML code looks like this:
<ion-card color="light" *ngFor="let fecha of fechaCards">
<ion-item color="warning">
<ion-icon slot="start" name="fitness"></ion-icon>
<ion-label>
<h2 style="font-weight: bold">{{ fecha | date:'d/MMMM/yyyy' | uppercase }}</h2>
</ion-label>
</ion-item>
<!-- CONTENIDO --> ---> **Here is where I want to change colors**
<ion-card-content>
<ng-container *ngFor="let clase of fechaClases">
<ion-item [color]="getColor()" (click)="inscripcion(clase)" *ngIf="clase.horaCierre == fecha">
<h2 slot="start" style="font-weight: bold">{{ clase.horaApertura | date: 'shortTime' }}</h2>
<h2 slot="end">{{ "Cupos disponibles" + " " + clase.cuposDisponibles + "/" + clase.cupos }}</h2>
</ion-item>
</ng-container>
</ion-card-content>
</ion-card>
getColor()
for (let index = 0; index < this.fechaClases.length; index++) {
if (this.fechaClases[index].estaInscripto == true) {
console.log(this.fechaClases[index].estaInscripto, 'true');
return 'danger'
}
else {
return 'warning'
}
}
what i'm doing wrong? Hope anyone can help me :) Thanks in advance guys!
You should think in a more "angular" way.
Your list is created by iterating over your fechaClases array, using the *ngFor directive. You just need a conditional binding of the color property, checking the estaInscripto property of each array object.
So, change this line:
<ion-item [color]="getColor()" (click)="inscripcion(clase)" *ngIf="clase.horaCierre == fecha">
with this one:
<ion-item [color]="clase.estaInscripto? 'danger' : 'warning'" (click)="inscripcion(clase)" *ngIf="clase.horaCierre == fecha">
Also, delete your getColor() function, there is no need for it.
Check this stackblitz (inside the home page .html and .ts files) with simplified, working example of the above.
https://stackblitz.com/edit/ionic-e7pfdz
I have a nested ngFor statement. I need to retrieve the value of my first ngFor on button click.
I have tried the following:
use template reference variable
use attribute binding
use Input decorator
This is my code:
<mat-expansion-panel *ngFor="let item of Datasource;">
<mat-expansion-panel-header style="display:flex" class="mat-row">
{{item.Header}}
</mat-expansion-panel-header>
<mat-selection-list [(ngModel)]="selectedOptions">
<mat-list-option *ngFor="let line of item.match; let i= index;" [value]="line">
<div class="container-name">
<div class="col-6">{{i}} - {line.user.Name }} vs {{ line.user.Address }}</div>
</mat-list-option>
</mat-selection-list>
<div style="text-align:center; padding: 20px">
<button mat-raised-button color="primary" (click)="submit()" type="submit">Add</button>
</div>
</mat-expansion-panel>
Can this be achieved?
Well, you need to clone that object properties first. As that object is linked to the template, when you manipulate it, it is manipulated on template too. You can use var obj = Object.assign({}, actual obj) and then do the manipulation on obj instead of actual one. Then it will not get affected in template. Hope it helps.
I have created a form. but how to get selected values in function.
i used dropdown, in that selected value need to send to the function.
product_option[{{tms.productoption_id}}],
optnslist.product_optionvalue_id this two value need to send to function
Html code:
<form (ngSubmit)="logForm(myfoem)">
<ion-grid *ngIf="varibleprd == 'variable'">
<ion-item *ngFor="let tms of optionprd;">
<ion-label>{{tms.option_name}}:</ion-label>
<ion-select [(ngModel)]="tms.option_name" name="product_option[{{tms.productoption_id}}]">
<ion-option *ngFor="let optnslist of tms.optionvalue" [value]="optnslist.product_optionvalue_id">{{optnslist.optionvalue_name}}</ion-option>
</ion-select>
</ion-item>
</ion-grid>
<button block><ion-icon name="add"></ion-icon></button>
</form>
and Ts code:
export class ProductdetailPage {
frmdata:any;
subfrmdata:any;
logForm(subfrmdata){
this.frmdata=subfrmdata.value;
console.log(this.frmdata);
}
}
Please try the below. This might help you:-
In HTML file
<ion-option *ngFor="let optnslist of tms.optionvalue" [value]="optnslist.product_optionvalue_id"
(ionSelect)="logForm(product_option[tms.productoption_id], optnslist.product_optionvalue_id);">
{{optnslist.optionvalue_name}}</ion-option>
Then in the ts file:-
logForm(productoption_id, product_optionvalue_id){
// Do the needful
}
I'm new to ionic. Actually, I'm trying to display products added to cart in cart page. I got value from Foreach method, but when I try to display, it won't show.
cartpage(){
this.cart.cartview().then((result) => {
this.cartdisplay = JSON.parse(JSON.stringify(result));
this.categorydata = JSON.parse(JSON.stringify(this.cartdisplay.data));
console.log('result11:'+JSON.stringify(this.categorydata));
var arr = Object.keys(this.categorydata.items);
//this.cartarray =[];
arr.forEach( a =>{
this.cartarray['orderitem_name']= this.categorydata.items[a].orderitem_name;
this.cartarray['orderitem_quantity']= this.categorydata.items[a].orderitem_quantity;
console.log('cart : '+this.cartarray['orderitem_quantity']);
console.log(a) //item id
console.log(this.categorydata.items[a].cart_id) //product id
})
console.log(this.cartarray);
})
}
in the console log, orderitem_name and orderitem_quantity is displaying, but it does not show in the HTML page.
This is my HTML code:
<ion-card>
<ion-card-header>Items</ion-card-header>
<!--<ion-card-content >Your cart is empty!</ion-card-content>-->
<ion-list no-lines>
<ion-item *ngFor="let tms of cartarray;" >
<ion-avatar item-left>
<img src="">
</ion-avatar>
<h2><b>{{tms.orderitem_name}} x {{tms.orderitem_quantity}}</b></h2>
<div [ngSwitch]="product?.price_discount">
<p *ngSwitchCase="true">₹ <span st></span> <span></span></p>
<p *ngSwitchDefault>₹ <span style="text-decoration: line-through;"></span> <span></span></p>
</div>
<div>
<button primary large>
<ion-icon name="add" (click)="increaseQuantity(i)"></ion-icon>
</button>
<button primary large>
<ion-icon name="remove" (click)="decreaseQuantity(i)"></ion-icon>
</button>
</div>
</ion-item>
</ion-list>
<!--<ion-card-content ><div>Total for this order is ₹ </div></ion-card-content>-->
</ion-card>
Help me to display a value in foreach loop in ionic 3
You can try these
this.cart.cartview().then((result) => {
this.cartarray = Object.keys(result["data"]["items"]).map((key) => {
return result["data"]["items"][key];
});
})
And your html file
<div *ngFor="let tms of cartarray;">
<h2><b>{{tms.orderitem_name}} x {{tms.orderitem_quantity}}</b></h2>
</div>
i don't no ionic so thats why i'am testing with div but it's work fine.
you miss the "tms" variable name before display list of data
<ion-item *ngFor="let tms of cartarray;" >
<h2><b>{{tms.orderitem_name}} x {{tms.orderitem_quantity}}</b></h2>
</ion-item>
You should debug your array like
<ion-item *ngFor="let tms of cartarray;" >
<h2><b>{{tms | json }} x {{tms | json}}</b></h2>
</ion-item>
Thanks
This is my code:
<ion-content padding>
<h1>Datum: </h1>
<ion-list>
<ion-item *ngFor="let u of tecaj">
<h2>{{u.datum}}</h2>
<h2>{{u.drzava}} | {{u.valuta}}</h2>
<p>{{u.srednji_tecaj}}</p>
</ion-item>
</ion-list>
</ion-content>
and I want to print date just once, so
<h2>{{u.datum}}</h2> just once in first <h1> after "Datum:"
on screenshot there is my JSON file. how do I take just one element of JSON object without *ngFor?
Others have proposed good solutions, but the ngFor directive gives you access to several variables (index, first, last, odd and even) which allow even cleaner and more elegant code. So that means we can do the following:
<ion-item *ngFor="let u of tecaj; let first = first">
<h2 *ngIf="first">{{u.datum}}</h2>
I would say if you don't want to use for loop then I would go with David but I don't see any problem in using for loop and you can extract a single date by using the index in the loop as follows
<ion-content padding>
<h1>Datum: </h1>
<ion-list>
<ion-item *ngFor="let u of tecaj; index as i">
<div *ngIf="i===0">
<h2>{{u.datum}}</h2>
<h2>{{u.drzava}} | {{u.valuta}}</h2>
<p>{{u.srednji_tecaj}}</p>
</div>
</ion-item>
</ion-list>
</ion-content>
You can change it as follows to access the datum, drzava, valuta and srednji_tecaj properties of the first element in the array:
<h1>Datum: </h1>
<ion-item *ngIf="tecaj">
<h2>{{ tecaj[0]?.datum }}</h2>
<h2>{{ tecaj[0]?.drzava}} | {{ tecaj[0]?.valuta }}</h2>
<p>{{ tecaj[0]?.srednji_tecaj }}</p>
</ion-item>
Everything inside interpolation ({{}}) will be evaluated and stringified and can then be rendered on the DOM.