[SOLVED] Ionic 2 : Create url with optionnal parameters

Ionic Framework ionic-v3
1

Edit : that’work for me since my api return the path of subcategories in the json result. I have made little change and all is ok now

Hello everyone,

I created this topic on StackOverflow to know if It’s the best practice to do something like that :

http://stackoverflow.com/questions/42791734/ionic-2-create-url-with-optionnal-parameters

I am new on ionic 2, and I missed maybe something in the doc to implement the developpement.

Here is a copy of the topic’s content :

I have a Rest API to browse a catalog and categories.

For example :

http://my_server_url/categories => give me all root categories
http://my_server_url/categories/category_a => give me subCategories of category_a , etc etc
http://my_server_url/categories/category_a/sub_category_a => give me sub-subCategories of sub_category_a etc...

At first, I just want to list Root Categories, and when I click on a category, I get an other list o subcategories and so one

I started to create a provider for my Rest API (Api.ts):

 import { Injectable } from '@angular/core';
 import { Http, RequestOptions, URLSearchParams } from '@angular/http';
 import 'rxjs/add/operator/map';

@Injectable()
export class ApiRest {
url: string = 'http://my_server_url';

constructor(public http: Http) {
}
get(endpoint: string, params?: any, options?: RequestOptions) {
  if (!options) {
   options = new RequestOptions();
  }

  if (params) {
    let p = new URLSearchParams();
    for(let k in params) {
       p.set(k, params[k]);
    }
   options.search = !options.search && p || options.search;
  }
  return this.http.get(this.url + '/' + endpoint, options);
 }
}

Then, I created the provider to obtain categories :

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { ApiRest } from './api';



@Injectable()
export class Categories {

constructor(public http: Http, public api: ApiRest) {
}

query(urlPath : string, params?: any) {
   return this.api.get(urlPath, params)
     .map(resp => resp.json());

}

}

At the end, I created a component to display Categories and subcategories when I click on a category:

category-list.ts :

  import { Component } from '@angular/core';
  import { NavController, NavParams } from 'ionic-angular';
  import { Categories } from '../../providers/categories';
  import { Category } from '../../models/category';

 @Component({
   selector: 'page-cards-category',
   templateUrl: 'cards-category.html'
 })
  export class CardsCategoryPage  {

  currentCategories : Category[];
  url  = 'categories';

  constructor(public navCtrl: NavController, public categories : Categories, public navParams: NavParams ) {

      if (navParams.get("category"))
         this.url = this.url + "/" + navParams.get("category");
      this.categories.query(this.url).subscribe(data => {
                this.currentCategories = data.subCategories || data.elements;
                console.log(data);
            },
            err => {
                console.log(err);
            });
    }

   ionViewDidLoad() {
       console.log('ionViewDidLoad CardsCategoryPage');
   }

   browseCategory(category : Category)
   { 
       this.navCtrl.push(CardsCategoryPage, {
          category: category.id
        });
   }

 }

.html

  <ion-content class="card-background-page">
       <ion-card  *ngFor="let cat of currentCategories;let i = index" >
           <img src="cat.effectiveUrl}}" ion-item (click)="browseCategory(cat)"/>
           <div class="card-title">{{cat.name}}</div>
       </ion-card>
   </ion-content>

It doesn’t work well :

For example : I don’t keep the entire url path (categories/category_a/subcategory_a/…)
It’s reset in constructor : catetories/category_a and when i click on category_a , I get categories/subcategory_a

Thanks for your feedback :slight_smile: