I'm developing my first aplication with Ionic, and would like to display the firebase data at home.html, but when I start the serve show me this message in browser:
object(...) is not a function
I create this code at home.ts:
import { Component } from '#angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { ShoppingListService } from '../../services/shopping-list/shopping-list.service';
import { AjaxObservable } from 'rxjs/observable/dom/AjaxObservable';
import { Observable } from 'rxjs/Observable';
import { Item } from '../../models/item/item.model';
#IonicPage()
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
shoppingList$ : Observable <Item[]>;
constructor(public navCtrl: NavController, private shopping:ShoppingListService) {
this.shoppingList$ = this.shopping
.getShoppingList() //pega a lista do banco de dados
.snapshotChanges() //chave e valor das infos do bd
.map(changes => {
return changes.map(c => ({
key: c.payload.key,
...c.payload.val(),
}));
});
}
}
After this, I create the home.html:
<ion-content padding>
<ion-list>
<ion-list-header>
Items
</ion-list-header>
<ion-item *ngFor="let item of shoppingList$ | async">
{{item.nomecontratante}}
</ion-item>
</ion-list>
</ion-content>
Thanks for help me!
Related
I'm trying to get data that I get from a post call and display in my html page in ionic.
My Ts code is
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '#angular/common/http';
#IonicPage()
#Component({
selector: 'page-fashion',
templateUrl: 'fashion.html',
})
export class FashionPage {
users: any;
body: Object = {
"id": 1014,
"filter": null,
"lat": 13.05831,
"lng": 80.21195,
"mapRadius": 5,
"pageSize": 50,
"pageStart": 1,
"priceRangeFrom": 0,
"priceRangeTo": 100000
};
constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {
this.users = this.httpClient.post('myapi',this.body);
this.users.subscribe(data => {
this.users = data;
console.log('my data: ', data);
console.log("the users data ------------>",this.users);
})
}
}
And my html page is
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Fashion</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list inset>
<ion-item *ngFor="let user of (users | async) ">
<h2>{{user.Name}}</h2>
<p>Price : {{user.Price}}</p>
</ion-item>
</ion-list>
</ion-content>
The error is InvalidPipeArgument: '[object Object]
but i am also getting the data before the error message comes, so when i click on close on the above image i am getting my data, but i need to get it as soon as get into the page
EDIT1: I am Getting the data only when i switch to a different tab and come back to this
EDIT2: Guys a I forgot to mention what my api returns, It gives me [34]
i.e.
[{
....
},
..
].
There is an error in your aync pipe declaration it should be like below . Also you are using the same users property to create the Observable and store the data. Create a new property to store the data.
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Fashion</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list inset>
<ion-item *ngFor="let user of userData | async ">
<h2>{{user.Name}}</h2>
<p>Price : {{user.Price}}</p>
</ion-item>
</ion-list>
</ion-content>
edit : create a new property like userData:any[] = [] in your component as use it like below -
export class FashionPage {
users: any;
userData:any[] = []
body: Object = {
"id": 1014,
"filter": null,
"lat": 13.05831,
"lng": 80.21195,
"mapRadius": 5,
"pageSize": 50,
"pageStart": 1,
"priceRangeFrom": 0,
"priceRangeTo": 100000
};
constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {
this.users = this.httpClient.post('myapi',this.body);
this.users.subscribe(data => {
this.userData = data;
console.log('my data: ', data);
console.log("the users data ------------>",this.userData);
})
}
}
Initialize users: any; as users = []; since async requires an
observable or an array
Also change the variable name of subscription,
this.users = this.httpClient.post('myapi',this.body);
to,
this.userResult = this.httpClient.post('myapi',this.body);
change html to <ion-item *ngFor="let user of users | async ">
HTML:
<ion-item *ngFor="let user of users | async ">
<h2>{{user.Name}}</h2>
<p>Price : {{user.Price}}</p>
</ion-item>
So TS:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '#angular/common/http';
#IonicPage()
#Component({
selector: 'page-fashion',
templateUrl: 'fashion.html',
})
export class FashionPage {
users: any;
....
constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {
this.userResult = this.httpClient.post('myapi',this.body);
this.userResult.subscribe(data => {
this.users = data;
console.log('my data: ', data);
console.log("the users data ------------>",this.users);
})
}
}
The api returns me [34], i.e. array of 34 objects in it.
I needed a separate variable to store the data and to call the api.
So the code that works to get me the data is
HTML code
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Fashion</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list inset>
<ion-item *ngFor="let user of userData">
<h2>{{user.Name}}</h2>
<p>Price : {{user.Price}}</p>
</ion-item>
</ion-list>
</ion-content>
TS code
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '#angular/common/http';
#IonicPage()
#Component({
selector: 'page-fashion',
templateUrl: 'fashion.html',
})
export class FashionPage {
users: any;
userData = [];
body: Object = {
"id": 1014,
"filter": null,
"lat": 13.05831,
"lng": 80.21195,
"mapRadius": 5,
"pageSize": 50,
"pageStart": 1,
"priceRangeFrom": 0,
"priceRangeTo": 100000
};
constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {
this.users = this.httpClient.post('myapi',this.body);
this.users.subscribe(data => {
this.userData = data;
console.log('my data: ', data);
console.log("the users data ------------>",this.userData);
})
}
}
You guys are always wonderful,this community has never failed me once...Thanks a million to all for your valuable time to get me the answer!!!!!!!!
Hi Developpers i am working in projet where i need to load data from database and show it in the page in ionic , i didn't found any problem but it didn't work too
here is the page of getting data from database
<?php
include("db.php");
header("Access-Control-Allow-Origin: *");
$query = "select * from etudiant";
$result = $db->query($query);
$res['etudiant'] = [];
while ($etud = $result->fetch_assoc()) {
$res['etudiant'][] = $etud;
}
echo json_encode($res);
and this is the component page
import {Component} from '#angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {EtudiantProvider} from "../../providers/etudiant/etudiant";
#IonicPage()
#Component({
selector: 'page-etudiant',
templateUrl: 'etudiant.html',
})
export class EtudiantPage {
public isSearchbarOpened = false;
etudiant:String;
constructor(public navCtrl: NavController, NavParams: NavParams, public etudiantProvider: EtudiantProvider) {
}
ngOnInt() {
this.etudiantProvider.getEtudiant().subscribe(
data => (
this.etudiant=data.etudiant.nom
),
error => {
console.log(error);
}
)
}
}
and here is my providers
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class EtudiantProvider {
url: string;
constructor(public http: Http) {
console.log('Hello Provider');
this.url = "http://localhost/eportfolio/api.php";
}
getEtudiant(){
return this.http.get(this.url+"?action=getEtudiant").map(res => res.json())
}
}
and this is the page where i need to show data
<ion-list [virtualScroll]="etudiant" [approxItemHeight]="'250px'">
<ion-item *virtualItem="let etud">
<ion-avatar item-start id="avatar">
<p id="letters">AF</p>
</ion-avatar>
<h1>{{etud.nom}}</h1>
<button ion-item clear no-lines>{{etud.nom}}</button>
<button ion-item clear no-lines>{{etud.prenom}}</button>
</ion-item>
</ion-list>
export class etudiantEntity{
constructor(public nom: string, public prenom: string){}
}
create a class like that
and modify your Etudiant
export class EtudiantPage {
public isSearchbarOpened = false;
etudiant:etudiantEntity;
...etc
This might solve your problem
when I retrieve data from a json file, in the *ngFor displays all the values in the popover, but I need a specific popover to display based only on the data for selected/clicked weapon. Here is my code any help would be greatly appreciated. Thank you again for your help
Home
import { Component } from '#angular/core';
import { NavController, ViewController, PopoverController, Events} from 'ionic-angular';
import { RestProvider } from './../../providers/rest/rest';
import { PopupPage } from './../../pages/popup/popup';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
weapons: any;
errorMessage: string;
constructor(public navCtrl: NavController, public rest: RestProvider,
public popoverCtrl: PopoverController) {
}
ionViewDidLoad() {
this.getweapons();
}
getweapons() {
this.rest.getweapons()
.subscribe(
weapons => this.weapons = weapons,
error => this.errorMessage = <any>error);
}
presentPopover(myEvent)
{
let popover = this.popoverCtrl.create(PopupPage);
popover.present({
ev: myEvent
});
}
}
home.html
<ion-content>
<ion-searchbar [(ngModel)]="terms"></ion-searchbar>
<ion-item>
</ion-item>
<ion-list>
<button ion-item (click)="presentPopover($event)">
<ion-item *ngFor="let c of weapons?.weapon_category?.weapons | search : terms">
<h2>{{c.name}}</h2>
</ion-item>
</button>
</ion-list>
</ion-content>
popup.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, ViewController, Events} from 'ionic-angular';
import { RestProvider } from './../../providers/rest/rest';
import { HomePage } from './../../pages/home/home';
/**
* Generated class for the PopupPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-popup',
templateUrl: 'popup.html',
})
export class PopupPage {
rangeSettings = 20;
weapons: any;
errorMessage: string;
constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, public rest: RestProvider) {
alert('inside the popup');
}
close() {
this.viewCtrl.dismiss();
}
getweapons() {
this.rest.getweapons()
.subscribe(
weapons => this.weapons = weapons,
error => this.errorMessage = <any>error);
}
ionViewDidLoad() {
this.getweapons();
}
}
popup.html
<ion-header>
<ion-navbar>
<ion-title>popup</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let c of weapons?.weapon_category?.weapons">
<h2>{{c.damage.base}}</h2>
<h2>{{c.damage.chest0}}</h2>
<h2>{{c.damage.chest1}}</h2>
<h2>{{c.damage.chest2}}</h2>
<h2>{{c.damage.chest3}}</h2>
<h2>{{c.damage.head1}}</h2>
<h2>{{c.damage.head2}}</h2>
<h2>{{c.damage.head3}}</h2>
</ion-item>
<ion-item>
<ion-range min="0" max="80" [(ngModel)]="rangeSettings" color="danger" pin="true" snaps="true" disabled=true></ion-range>
</ion-item>
</ion-list>
</ion-content>
Popover doesn't need to hit the REST call again. You can pass the chosen weapon to the popover as a parameter.
Change your function to accept a weapon (make sure you change the code in the HTML too)
presentPopover(myEvent, weapon)
And send it to the popover controller this way:
this.popoverCtrl.create(PopupPage, weapon);
Now in your popup.ts, decleare a weapon object in your class,
weapon : any;
and grab the weapon from the navParams in your constructor
this.weapon = this.navParams.data;
Change your <ion-item> in popup.html to display the selected one.
<ion-item>
{{weapon.damage.base}}
...
</ion-item>
I have a json object that contains id of an image and its url in the server , in order to display it in an ion-list i try the code below but the image doesn't appear.
About.html
<ion-content padding>
<ion-list>
<ion-item *ngFor="let post of posts">
<img [src]="post.pic"/>
</ion-item>
</ion-list>
</ion-content>
here is my json object :
{"ListeImages":[{"id":"44","pic":"https:\/\/stationpfe.000webhostapp.com\/projet\/uploads\/1494201248244.jpg"}],"success":1}
About.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import {Imageservice} from '../../providers/imageservice';
import { Http } from '#angular/http';
#Component({
selector: 'page-about',
templateUrl: 'about.html',
providers:[Imageservice]
})
export class AboutPage {
posts: any;
constructor(public navCtrl: NavController,public im:Imageservice,public http: Http) {
this.getImages();
}
getImages(){
this.im.OneArrive().subscribe(response=>
{
this.posts=response.ListeImages;
});
}
}
imageservice.ts ( provider)
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class Imageservice {
constructor(public http: Http) {
console.log('Hello Imageservice Provider');
}
public OneArrive(){
var url='https://stationpfe.000webhostapp.com/projet/SelectListeImages.php';
return this.http.get(url).map(res=>res.json());
}
}
<ion-avatar item-left>
<img [src]="imageUrl+card.image" />
</ion-avatar>
i have stored the image url in .ts file the card.image value is the value that i get from server.
In my case i have a server storage=>http://311.11.111.111:8000/storage<=like this
i specify the storage + the value from api to display in the
<img [scr]=""/> specified above.
Hope it helps....
im new in IOnic 2 and Angular, i try to filter a Json to show only a especific value; example get only user by gender. this is my code
home.html
<ion-list>
<ion-item *ngFor="let item of items | filter: {item.gender:'female'}" (click)="itemClicked($event,item)">
<ion-avatar item-left>
<img src="{{item.picture.thumbnail}}">
</ion-avatar>
<h2>{{item.name.first | uppercase }}</h2>
<h3>{{item.name.last | uppercase }}</h2>
<p>{{item.gender}}</p>
<button ion-button item-right color="danger" (click)="buttonClick($event)">Button</button>
</ion-item>
</ion-list>
This is my .ts file with the API Service
import { Component } from '#angular/core';
import {Http} from '#angular/http';
import { NavController } from 'ionic-angular';
import 'rxjs/add/operator/toPromise';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public items:any;
constructor(public navCtrl: NavController,public http: Http) {
this.http = http;
this.http.get("http://api.randomuser.me/?results=10")
.subscribe(data =>{
//console.log(data['_body']);
this.items=JSON.parse(data['_body']).results;//Bind data to items object
},error=>{
console.log(error);// Error getting the data
} );
}
buttonClick(event){
console.log("button clicked");
console.log(event);
}
itemClicked(event,itemData){
console.log("item clicked");
console.log(event);
console.log(itemData);
}
}
But my idea does not work
any idea to help me-?? :`/
You can do that in the component code instead of in the view...
import { Component } from '#angular/core';
import {Http} from '#angular/http';
import { NavController } from 'ionic-angular';
import 'rxjs/add/operator/toPromise';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public items: any;
constructor(public navCtrl: NavController, public http: Http) {
// this.http = http; <- You don't need this, this.http is already available because by declaring it in the constructor, now a public property is created in the component
this.http.get("http://api.randomuser.me/?results=10")
.map(data => data.json().results) // Instead of getting the _body manually, you can use the map method from RxJS
.subscribe(data =>{
//console.log(data);
this.items = data.filter(item => item.gender === 'female');
},error=>{
console.log(error);// Error getting the data
});
}
// ...
}
And now in your view
<ion-list>
<ion-item *ngFor="let item of items" (click)="itemClicked($event,item)">
<ion-avatar item-left>
<img src="{{ item.picture.thumbnail }}">
</ion-avatar>
<h2>{{ item.name.first | uppercase }}</h2>
<h3>{{ item.name.last | uppercase }}</h2>
<p>{{ item.gender }}</p>
<button ion-button item-right color="danger" (click)="buttonClick($event)">Button</button>
</ion-item>
</ion-list>