how to search to in json data
please help me
pls elaborate your Question!
I want to do a search on the data that I recover from json data
you can use loop also for this
Please don’t post your code as screenshots.
1 Like
this is my code
s-------------------s
why?
LoLStats
Because we can’t copy your code and debug it for you.
console.log('Hello');
okay thanks
LoLStats
home.ts
constructor(public navCtrl: NavController, public http: Http) {
//this.intiel;
http.get('http://localhost/ionic/api.php').subscribe(
row =>
{
this.items=JSON.parse(row['_body']);
}
)
this.initializeItems();
}
initializeItems(){
return this.items;
}
getItems(ev: any) {
this.initializeItems();
let val = ev.target.value;
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
});
}
}home.html
<ion-searchbar (ionInput)="getItems($event)">
</ion-searchbar>
<ion-card class="adv-map" *ngFor="let item of items" (click)="itemClicked($event, item)">
<div style="position: relative">
<img src="http://localhost/ionic/images/{{item.image}}" alt="">
<ion-fab right top>
<button ion-fab color="secondary">
<ion-icon name="pin"></ion-icon>
</button>
</ion-fab>
</div>
<ion-item>
<ion-icon color="subtle" large item-left name='information-circle'></ion-icon>
<h2> {{item.name}} </h2>
<p></p>
</ion-item>
<ion-item actions>
<span ion-text item-left color="secondary" class="item-bold">26 min</span>
<span ion-text item-left color="subtle">(8.1 mi)</span>
<button ion-button color="secondary" clear item-right icon-left>
<ion-icon name='navigate' ></ion-icon>
Go To Maps
</button>
</ion-item>
</ion-card>
Leading underscores are a JavaScript convention for private members. You should never access them from outside the class that declares them. Call row.json() instead.
I am getting an error TypeError: this.items is undefined Any help? Thanks
search.ts.
import { Component, ViewChild } from "@angular/core";
import { NavController, Platform, App, MenuController, AlertController } from "ionic-angular";
import { AuthService } from "../../providers/auth-service";
import { Common } from "../../providers/common";
import { Camera, CameraOptions } from "@ionic-native/camera";
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Http, Headers } from '@angular/http';
import { UploadPage } from '../upload/upload';
import { UserPage } from '../userProfile/userProfile';
import { MediaPage } from '../mediaProfile/mediaProfile';
import { HomePage } from '../home/home';
@Component({ selector: "page-search", templateUrl: "search.html" })
export class SearchPage {
data: any = {};
public items: any;
public item: any;
public userDetails: any;
public resposeData: any;
public dataSet: any;
public userSet: any;
public mediaSet: any;
public noRecords: boolean;
userPostData = {
uid: "",
token: "",
username: "",
bio: ""
};
constructor(
public common: Common,
public navCtrl: NavController,
public app: App,
public menu: MenuController,
public authService: AuthService,
public http: Http,
platform: Platform,
statusBar: StatusBar,
splashScreen: SplashScreen
) {
http.get('http://localhost/PHP-Slim-Restful1/api/userGroupSearch').subscribe(
row => {
this.items = JSON.stringify(row['username']);
}
)
this.initializeItems();
this.mostmediaList();
}
initializeItems() {
return this.items;
}
getItems(ev: any) {
this.initializeItems();
let val = ev.target.value;
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
return (item.username.toLowerCase().indexOf(val.toLowerCase()) > -1);
});
}
}
mostmediaList() {
this.authService.postData(this.userPostData, "mostFansMedia").then(
result => {
this.resposeData = result;
if (this.resposeData.mostMedia) {
this.mediaSet = this.resposeData.mostMedia;
console.log(this.mediaSet);
} else {
console.log("No access");
}
},
err => {
console.log("No access");
//Connection failed message
}
);
}
UploadPage() {
this.navCtrl.push(UploadPage);
}
SearchPage() {
this.navCtrl.push(SearchPage);
}
HomePage() {
this.navCtrl.push(HomePage);
}
converTime(time) {
let a = new Date(time * 1000);
return a;
}
backToWelcome() {
const root = this.app.getRootNav();
root.popToRoot();
}
logout() {
//Api Token Logout
localStorage.clear();
setTimeout(() => this.backToWelcome(), 1000);
}
}
search.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-toolbar color="primary">
<ion-searchbar (ionInput)="getItems($event)">
</ion-searchbar>
</ion-toolbar>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card class="adv-map" *ngFor="let item of items" (click)="itemClicked($event, item)">
<div style="position: relative">
<ion-fab right top>
<button ion-fab color="secondary">
<ion-icon name="pin"></ion-icon>
</button>
</ion-fab>
</div>
<ion-item>
<ion-icon color="subtle" large item-left name='information-circle'></ion-icon>
<h2> {{item.username}} </h2>
<p></p>
</ion-item>
<ion-item actions>
<span ion-text item-left color="secondary" class="item-bold">26 min</span>
<span ion-text item-left color="subtle">(8.1 mi)</span>
<button ion-button color="secondary" clear item-right icon-left>
<ion-icon name='navigate'></ion-icon>
Go To Maps
</button>
</ion-item>
</ion-card>
<ion-card *ngFor="let item of dataSet; let msgIndex = index">
<ion-item>
<img [src]="'../assets/imgs/users/' + item.profile_pic " *ngIf="item.profile_pic" />
</ion-item>
<ion-item>
<ion-card-content>
<p [innerHTML]="item.uid | linky"></p>
<span [innerHTML]="item.username | linky"></span>
</ion-card-content>
</ion-item>
</ion-card>
<ion-card *ngFor="let item of mediaSet; let msgIndex = index">
<ion-item>
<ion-card-content>
<p [innerHTML]="item.title | linky"></p>
</ion-card-content>
</ion-item>
</ion-card>
</ion-content>