How to search to in json data


#1

how to search to in json data
please help me


#2

pls elaborate your Question!


#3

I want to do a search on the data that I recover from json data


#4

you can use loop also for this


#5


#6


#7

Please don’t post your code as screenshots.


#8

this is my code
s-------------------s


#9

why?
LoLStats



#10

Because we can’t copy your code and debug it for you.

console.log('Hello');

#11

okay thanks
LoLStats


#12

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);
          });

        }
        
      
      }

#14

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>
 


#15

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.


#16

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>