Ion-Searchbar with Backendless in ionic 4

General
1

Hi there,

I am trying to search data with ion-searchbar from backendless. But it’s not working.
Everytime when i am trying to search some to search bar it can hide my list and show nothing. I’m trying different type of code but the result should be same.

There is no Error on Console.

Thanks in Advance

2

Hello,

Could you please show how you use the Backendless API to retrieve your data?

Mark

3

// tab1.page.html

Tab One 
 <ion-searchbar showCancelButton="always" mode="ios" (ionInput)="getItems($event)"> 
</ion-searchbar>

<ion-list >
    <ion-card  *ngFor="let entry of items">
        <ion-item>
        <ion-label>
     
              <h2>{{entry.Username}}</h2>
              <p>Contact: {{entry.Phone}}</p>
              <p>Joined On: {{entry.Joindate}}</p>   

         </ion-label>
        </ion-item>
  </ion-card >
</ion-list>

//tab1.page.ts

import { Component } from ‘@angular/core’;

import { HttpClient } from ‘@angular/common/http’;

import { AlertController } from ‘@ionic/angular’;

import { LoadingController, ToastController } from ‘@ionic/angular’;

@Component({

selector: ‘app-tab1’,

templateUrl: ‘tab1.page.html’,

styleUrls: [‘tab1.page.scss’]

})

export class Tab1Page {

initializeItems() {
var url = ’ https://api.backendless.com/D78DE5F-84BB-6694-FFEE-FA08F1C9910/89E61A3-4C6-312-FF6-297BC28700/data/table_name’;
this.http.get(url).subscribe(data => {
this.items = data;
})
}

getItems(ev) {
// Reset items back to all of the items
this.initializeItems();

// set val to the value of the ev target
var val = ev.target.value;

// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
  this.items = this.items.filter((item) => {
    return (item.toString().indexOf(val.toLowerCase()) > -1);
  })
}

}

public items;

constructor( private http: HttpClient, public LoadingController:LoadingController, public toastController: ToastController,private alertController: AlertController) {

this.initializeItems();

}

}

Here i am trying this simple get data from backendless and search. I am new in ionic 4 so i’m not sure this is the perfect way to search data from the server. I’m search about this on internet. There is many tutorial available about ionic with firebase but no one can use ionic with backendless.

I don’t know how to get data from backendless on real-time. I am trying Real-time services with firebase but don’t know how to do with backendless.

Thanks

4

Does the URL you have in the code return any data? I checked the application it references and that application does not even exist in our system.

5

I’m sorry Sir, i just change the table name.

Here is the correct link which i can used in my app

https://api.backendless.com/D78DE5EF-84BB-6694-FFEE-FA08F1C99100/89E61AA3-4C16-3192-FFA6-2D197BC28700/data/Register

6

I think it is a timing issue - you call initializeItems() and immediately start processing the this.items array. However, data from the backend will come a bit later. As a result, nothing will happen in the UI.

Btw, this is not an issue with Backendless and Ionic, in fact Backendless does not have any special requirements to work with Ionic - you simply use our APIs as any other one from JS.

7

Thanks for clarifying my doubts about Backendless and Ionic.

I’m using the backendless URL link for retrieve the data because it is easy to get and post data in backendless. I don’t know how to get and post data with backendless APIs.

could you please tell me how i can get data from backendless by using it’s APIs in ionic 4

8

You can see our documentation for JS, which works with Ionic at:
https://backendless.com/docs/js/data_basic_search.html
https://backendless.com/docs/js/data_general_api.html

Regards,
Mark

9

Ok Mark, i’ll try.

Thanks for your help :slight_smile: