Extend HTTP Get Url on click (Ionic 2 + Angular 2)

Question

I have recently made a search for my app built in ionic which is pulling from an api using a http get method as below

static get parameters() {
    return [[Http]];
}

searchRecipes(id) {
    var url = 'http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=//////&q=' + encodeURI(id);
    var response = this.http.get(url).map(res => res.json());
    return response;
}

So far I have the id which is what they user types in. I now want to add filters to my search (ingredients, cuisine and allergies), this is done by extending the url further with specific calls such as &allowedAllergy[] and allowedDiet[].

I currently have a list of items implemented such as, each would have a value set to them, and on click on one it will add to the url provided. Implementation to be the same as http://www.yummly.uk/

      <div class="diets">
        <ul>
          <li>Lacto vegetarian</li>
          <li>Ovo vegetarian</li>
          <li>PaleoPescetarian</li>
          <li>Vegan</li>
          <li>Vegetarian</li>
        </ul>
    </div>
    <div class="allergies">
      <ul>
        <li>Dairy-Free</li>
        <li>Egg-Free</li>
        <li>Gluten-Free</li>
        <li>Peanut-Free</li>
        <li>Seafood-Free</li>
        <li>Sesame-Free</li>
        <li>Soy-Free</li>
        <li>Sulfite-Free</li>
        <li>Tree Nut-Free</li>
        <li>Wheat-Free</li>
      </ul>
    </div>

Search Method

recipes: any;

searchRecipeDB(event, key) {
    if(event.target.value.length > 2) {
        this.apiAuthentication.searchRecipes(event.target.value).subscribe(
            data => {
                this.recipes = data.matches; 
                console.log(data);
            },
            err => {
                console.log(err);
            },
            () => console.log('Recipe Search Complete')
        );
    }
}

If anyone can give advice on how to implement this it would be a life saver! Thanks all

rtn · Accepted Answer · 2017-02-20 18:01:03Z

Ok here it is component:

import {Component, OnInit} from "@angular/core"
import {Http} from "@angular/http"

@Component({
    selector: 'app-menu',
    templateUrl: './menu.component.html'
})
export class MenuComponent implements OnInit
{
    diets: Array<string> = ['Lacto vegetarian', 'Ovo vegetarian', 'PaleoPescetarian', 'Vegan', 'Vegetarian'];
    allergies: Array<string> = ['Dairy-Free',
                                'Egg-Free',
                                'Gluten-Free',
                                'Peanut-Free',
                                'Seafood-Free',
                                'Sesame-Free',
                                'Soy-Free',
                                'Sulfite-Free',
                                'Tree Nut-Free',
                                'Wheat-Free'];


    id: number = 1;
    selectedDiets: Array<boolean>;
    selectedAllergies: Array<boolean>;
    allowedAllergy: Array<string>;
    allowedCuisine: Array<string>;
    url: string;

    constructor(private http: Http)
    {
        this.selectedDiets = new Array(this.diets.length).fill(false);
        this.selectedAllergies = new Array(this.allergies.length).fill(false);
    }

    ngOnInit()
    {
    }

    submit()
    {
        this.processAllergy();
        this.processDiets();
        this.searchRecipes(this.id, this.allowedAllergy, this.allowedCuisine);
    }

    processAllergy()
    {

        this.allowedAllergy = this.selectedAllergies.reduce((selectedList: Array<string>, isSelected: boolean, index: number) =>
        {
            return isSelected ? [...selectedList, this.allergies[index]] : selectedList;
        }, [])

    }

    processDiets()
    {
        this.allowedCuisine = this.selectedDiets.reduce((selectedList: Array<string>, isSelected: boolean, index: number) =>
        {
            return isSelected ? [...selectedList, this.diets[index]] : selectedList;
        }, [])

    }

    searchRecipes(id: number,
                  allowedAllergy: Array<string>,
                  allowedCuisine: Array<string>)
    {


        this.url = 'http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=//////&q=' + encodeURI(id.toString());


        if (allowedAllergy.length)
        {
            this.url = this.url + `&allowedAllergy=${encodeURI(allowedAllergy.toString())}`
        }
        if (allowedCuisine.length)
        {
            this.url = this.url + `&allowedCuisine=${encodeURI(allowedCuisine.toString())}`
        }


        console.log(this.url);
        //return this.http.get(url).map(res => res.json());
    }
}

And the view:

<pre>selectedDiets: {{selectedDiets | json}}</pre>
<pre>selectedAllergies: {{selectedAllergies | json}}</pre>
<pre>allowedAllergy: {{allowedAllergy | json}}</pre>
<pre>selectedAllergies: {{allowedCuisine | json}}</pre>
<div class="diets">
  <strong>Select diet regiments</strong>
  <ul>
    <li *ngFor="let diet of diets; let i = index">
      {{diet}}
      <input type="checkbox"
             [(ngModel)]="selectedDiets[i]">
    </li>
  </ul>
</div>

<div class="allergies">
  <strong>Select allergy requirements</strong>
  <ul>
    <li *ngFor="let allergy of allergies; let i = index">
      {{allergy}}
      <input type="checkbox"
             [(ngModel)]="selectedAllergies[i]">
    </li>
  </ul>
</div>
<pre>{{url}}</pre>
<button (click)="submit()">
  search
</button>

Hey, thank you so much for this! The way it works is great and I do for the most part get what is going on. However (you're gunna hate me) I now have my search and filtered search working separately as this can see my Search Method code in the question. I have tried to change it from this.apiAuthentication.searchRecipes to this.searchRecipes but it throws up an error stating Supplied parameters do not match any signature call of target. Essentially the id instead of being a number, will need to be the value wrote by the user in the search.

rtn · Accepted Answer · 2017-02-20 16:38:36Z

0

try this it a bit basic but will do the job:

searchRecipes(id: number,
              allowedAllergy: Array<string>,
              allowedCuisine: Array<string>)
{
    let url = 'http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=//////&q=' + encodeURI(id.toString());

    if (allowedAllergy.length)
    {
        url = url + `&allowedAllergy=${allowedAllergy.toString()}`
    }
    if (allowedCuisine.length)
    {
        url = url + `&allowedCuisine=${allowedCuisine.toString()}`
    }

    return this.http.get(url).map(res => res.json());
}

answered Feb 20, 2017 at 16:38

rtn

2,0344 gold badges21 silver badges39 bronze badges

2 Comments

BA1995 Over a year ago

Thanks for the reply :) I have edited my question to see if it makes a bit more sense now what I'm aiming for

rtn Over a year ago

Stack overflow is not really a code writing service but I am bored at work so will write something up for you. Give me 10 mins.

Collectives™ on Stack Overflow

Extend HTTP Get Url on click (Ionic 2 + Angular 2)

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related