Hello all,
I have some data pulled out of a json file:
"field_ingredienten":["1 courgette","1 ei","250 gr bloem","450 ml melk","1 tl gemalen komijn","100 gr geraspte jong belegen kaas","4 el zonnebloemolie"]
Now every item between the “…” is placed in one line but I want it in a list format.
How can I do that?
Perhaps something like
<ion-list>
<ng-container *ngFor="let item of items">
<ion-item>{{item}}...
If I do your option than the error:
Cannot find a differ supporting object NgFor only supports binding to Iterables such as Arrays
Shows up.
I read something about creating an array then, I guess an array of the field_ingredienten then. If someone knows a sort of example with getting json data and create an array of a field in that result than I like to see it 
For now Im going to search how to achief this
I don’t think I would use the word “create”, because the array is already there:
junk = JSON.parse('{"field_ingredienten":["1 courgette","1 ei","250 gr bloem","450 ml melk","1 tl gemalen komijn","100 gr geraspte jong belegen kaas","4 el zonnebloemolie"]}');
<ion-item *ngFor="let ing of junk.field_ingredienten">
<ion-label>{{ing}}</ion-label>
</ion-item>
…does pretty much what one would expect.
I dont understand. When I use this then every item from
["1 courgette","1 ei","250 gr bloem","450 ml melk","1 tl gemalen komijn","100 gr geraspte jong belegen kaas","4 el zonnebloemolie"]
is in a list but also with the full part [“1 courgette”,“1 ei”,“250 gr bloem”,“450 ml melk”,“1 tl gemalen komijn”,“100 gr geraspte jong belegen kaas”,“4 el zonnebloemolie”] behind every item.
In order for anybody to say anything useful, it would really help if you could post sufficient code needed to replicate your situation. That includes both the relevant controller-side definitions and the bit from the template that references them.
The restprovider:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
@Injectable()
export class RestProvider {
apiUrl = 'http://headless.compware.nl';
constructor(public http: HttpClient) {
console.log('Hello RestProvider Provider');
}
getWeekmenus() {
return new Promise(resolve => {
this.http.get(this.apiUrl+'/weekmenu').subscribe(data => {
resolve(data);
}, err => {
console.log(err);
});
});
}
}
The recept-detail.TS page:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';
import 'rxjs/add/operator/map';
@IonicPage()
@Component({
selector: 'page-recept-detail',
templateUrl: 'recept-detail.html',
})
export class ReceptDetailPage {
recept: RestProvider;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.recept = this.navParams.get("recept");
}
junk = JSON.parse('{"field_ingredienten":["field_ingredienten"]}');
}
The recept-detail.html page:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{ recept.title }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<img src="{{ recept.field_fotomenu }}" />
<div class="recipe-details">
<ion-grid>
<ion-row>
<ion-col>
<div class="recipe-ingredients-count">
<div>Energie Kcal</div>
</div>
</ion-col>
<ion-col>
<div class="recipe-servings">
<div>Koolhydraten</div>
</div>
</ion-col>
<ion-col>
<div class="recipe-time">
<div>Eiwitten</div>
</div>
</ion-col>
</ion-row>
</ion-grid>
</div>
<ion-list>
<ion-list-header class="ingredients-header">
Ingrediënten
</ion-list-header>
<ion-item *ngFor="let list of junk.field_ingredienten">
{{ list }}
</ion-item>
</ion-list>
<ion-item>
<h4>
{{ recept.field_hoe_maak_ik_het_recept }}
</h4>
</ion-item>
</ion-content>
Before the recept-detail pages there is this part:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ReceptDetailPage } from '../recept-detail/recept-detail';
import { RestProvider } from '../../providers/rest/rest';
import 'rxjs/add/operator/map';
/**
* Generated class for the WeekmenuPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-weekmenu',
templateUrl: 'weekmenu.html',
})
export class WeekmenuPage {
weekmenus: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public restProvider: RestProvider) {
this.getWeekmenus();
}
getWeekmenus() {
this.restProvider.getWeekmenus()
.then(data => {
this.weekmenus = data;
console.log(this.weekmenus);
});
}
ionViewDidLoad() {
this.getWeekmenus();
}
onSelect(recept: RestProvider): void {
this.navCtrl.push(ReceptDetailPage, {recept: recept});
}
}
with this html:
<ion-header>
<ion-navbar>
<ion-title>weekmenu's</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-searchbar [(ngModel)]="searchTerm" (ionInput)="searchRecipes()"></ion-searchbar>
<ion-item *ngFor="let recept of weekmenus" (click)="onSelect(recept)">
<ion-thumbnail item-left>
<img src="{{recept.field_fotomenu}}" alt="{{recept.title}}" title="{{recept.title}}" />
</ion-thumbnail>
<h2 class="recipe-name">{{recept.title}}</h2>
<span class="cooking-time">Kooktijd:</span>
<!--<span class="cooking-time-value">{{recept.totalTimeInSeconds / 60}} min</span>-->
</ion-item>
</ion-list>
</ion-content>
If I take the stuff relevant to the <ion-list> you seem to be asking about, I only have a one-item list containing “field_ingredienten”. All the actual ingredient-looking things seem to have gone away.
junk = JSON.parse('{"field_ingredienten":["field_ingredienten"]}');
<ion-list>
<ion-list-header class="ingredients-header">
Ingrediënten
</ion-list-header>
<ion-item *ngFor="let list of junk.field_ingredienten">
{{ list }}
</ion-item>
</ion-list>
Incidentally, I would just return the Observable coming from HttpClient instead of instantiating a needless Promise, and not pass restProvider using NavParams. If ReceiptDetailPage wants a RestProvider, it should be injecting it itself. The current situation would seem to be overly tightly coupling these two pages together for no benefit.
The part
"["1 courgette","1 ei","250 gr bloem","450 ml melk","1 tl gemalen komijn","100 gr geraspte jong belegen kaas","4 el zonnebloemolie"]
is the result of what is in the field
field_ingredienten
Whe I use your first answer
junk = JSON.parse('{"field_ingredienten":["1 courgette","1 ei","250 gr bloem","450 ml melk","1 tl gemalen komijn","100 gr geraspte jong belegen kaas","4 el zonnebloemolie"]}');
the result on the html page is look like this:
1 courgette 1 courgette","1 ei","250 gr bloem","450 ml melk","1 tl gemalen komijn","100 gr geraspte jong belegen kaas","4 el zonnebloemolie
1 ei 1 courgette","1 ei","250 gr bloem","450 ml melk","1 tl gemalen komijn","100 gr geraspte jong belegen kaas","4 el zonnebloemolie
250 gr bloem 1 courgette","1 ei","250 gr bloem","450 ml melk","1 tl gemalen komijn","100 gr geraspte jong belegen kaas","4 el zonnebloemolie
450 ml melk 1 courgette","1 ei","250 gr bloem","450 ml melk","1 tl gemalen komijn","100 gr geraspte jong belegen kaas","4 el zonnebloemolie
etc..
what I want it to be is:
1 courgette
1 ei
250 gr bloem
450 ml melk
etc..
Something strange is happening in how you are incorporating it, because here is the screenshot of the scratch project from my initial post.
you’re screenshot is indeed what I want but that is not what I see then when I doing that
Than I have to look what Im doing wrong there 
I think you can try with some online editor, then all of us can help you in some way more effective.
I try a bit with the json string and ngFor, it’s working perfectly
Ionic:
Angular:
I dont get this part to work. I see you ghet a nice list in your image but for me that is not working. Is there some documentation I can use because I do something wrong bur what?
