I'm developing an application for Ionic 2.I'm taking pictures from JSON, and I list the data in the console.log.However they're not displayed in HTML.Error (GET http://ukopuz.com/[object%20Object] 404 (Not Found) )Where did I go wrong?
data-api.service.ts
import {Injectable} from '#angular/core';
import {Http,Response} from '#angular/http';
#Injectable()
export class DataApi {
private url = 'http://ukopuz.com/api/2';
constructor(private http:Http){
}
getReferenceData(){
return new Promise(resolve =>{
this.http.get(`${this.url}`)
.subscribe(res => resolve(res.json()))
});
}
}
reference.html
<ion-content class="content">
<ion-grid>
<ion-row *ngFor="let ref of reference">
<ion-col col-4 >
<img src="http://ukopuz.com/{{ref}}" >
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
reference.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams,ModalController } from
'ionic-angular';
import {DataApi} from '../../app/dataapi/data-api.service';
import {Http, HttpModule} from '#angular/http';
import {ModalPage} from '../modal/modal';
#IonicPage()
#Component({
selector: 'page-references',
templateUrl: 'references.html',
})
export class ReferencesPage {
reference : any;
constructor(public navCtrl: NavController, public navParams:
NavParams,public dataApi:DataApi,
public http:HttpModule,public modalCtrl:ModalController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ReferencesPage');
this.dataApi.getReferenceData().then(data =>
this.reference = data);
console.log("data:"+ this.reference );
console.log("viewload");
}
}
data.json
[
{
"3": "/img/ref/adana.png",
"4": "/img/ref/ajans.png",
"5": "/img/ref/akp.jpg",
"6": "/img/ref/akp.png",
"7": "/img/ref/akpgenclik.png",
"8": "/img/ref/ankara.png",
"9": "/img/ref/arnavut.png",
"10": "/img/ref/aydin.png"
}
]
I have checked your return json from API, it is not returning any data due to this you are getting any response in your .html page
Check the API page
Related
I am performing the login using API in Ionic but I am getting the error :
Error: Property 'json' does not exist on type '{}'.
This is my loginpage.html:
<ion-header>
<ion-navbar>
<ion-title>loginpage</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form (submit)="getloginUsers()">
<ion-list>
<ion-item>
<ion-label fixed>Email</ion-label>
<ion-input type="email" [(ngModel)]="userData.email" name="email"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password" [(ngModel)]="userData.password" name="password"></ion-input>
</ion-item>
<div padding>
<button ion-button color="primary" block>Login</button>
</div>
</ion-list>
</form>
</ion-content>
This is my loginpage.ts:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { ListPage } from '../list/list';
#IonicPage()
#Component({
selector: 'page-loginpage',
templateUrl: 'loginpage.html',
})
export class LoginpagePage {
responseData : any;
userData = {"email": "", "password": ""};
constructor(public navCtrl: NavController, public navParams: NavParams,
public restProvider: RestapiProvider) {
this.getloginUsers();
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginpagePage');
}
getloginUsers(){
this.restProvider.getUsers(this.userData,'user_Login').then((result) => {
if(result){
this.responseData = result.json();
if(this.responseData.userData){
console.log(this.responseData);
console.log("User Details");
this.navCtrl.push(ListPage);
}
else{
console.log("Incorrect Details"); }
}
}
, (err) => {
// Error log
});
}
}
This is code this.responseData = result.json(); error is coming.
Error: Property 'json' does not exist on type '{}'.
This is my Service restapi.ts:
import { HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
import { HttpHeaders } from '#angular/common/http';
import { Response } from '#angular/http';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout'
let apiUrl = 'http://192.168.1.10/honeybee/HoneyApi/';
#Injectable()
export class RestapiProvider {
token:any;
constructor(public http: HttpClient) {
console.log('Hello RestapiProvider Provider');
}
getUsers(credentials, type) {
return new Promise((resolve, reject) => {
var headers = new HttpHeaders();
headers.append('Access-Control-Allow-Origin' , '*');
headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
headers.append('Accept','application/json');
headers.append('Content-Type','application/json');
this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
.subscribe((res: Response) => {
resolve(res);
}, (err) => {
reject(err);
});
});
}
}
I have included the FormsModule in app.module.ts. Any help is much appreciated.
Since you are using HttpClient, you dont have to generally use result.json();
this.responseData = result;
Also you do not have to use Promise, change the service code as follows,
getUsers(credentials, type) {
var headers = new HttpHeaders();
headers.append('Access-Control-Allow-Origin' , '*');
headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
headers.append('Accept','application/json');
headers.append('Content-Type','application/json');
return this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers});
}
and in your component,
this.restProvider.getUsers(this.userData,'user_Login').subscribe((data) => {
console.log(data);
});
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!
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
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....