0

I'm currently creating a simple app with a mock JSON data import from a local file. I want to be able to list items with a certain category based on a navParams.

I have created an API service to retrieve the data and it works fine. This is an excerpt from the data:

 [
  {
    "id": 0,
    "category": "Fantasticness",
    "title": "Awesome Title",
    "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
    "imgpath": "assets/img/backgrounds/img1.png"
  },
  {
    "id": 1,
    "category": "Fantasticness",
    "title": "Cool Title",
    "description": "It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
    "imgpath": "assets/img/backgrounds/img2.png"
  }
]

This is my service, where the getFilteredItems is the one I'm looking to fix as it can take a category param:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class ItemApi {

constructor(private http: Http) {}

getItems(){
return new Promise(resolve => {
    this.http.get('assets/data.json')
      .subscribe(res => resolve(res.json()));
    });
  }

  getFilteredItems(term: string){

      // Parameters
      let params = new URLSearchParams();
      params.set('search', term); // the passed parameter: term

     // Get request with search parameters
     return new Promise(resolve => {
         this.http.get('assets/data.json', { search: params })
          .subscribe(res => resolve(res.json()));
     });

  }


}

In my controller, I'm calling the API and trying to pass the data with navParams. I have logged the category with this.category and it works fine as it shows the passed data. However, when I'm trying to call my service that takes the category parameter, it doesn't work.

This is my controller for the category list:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';

// Import pages to allow links to the page
import { SingleItem } from '../../pages/single-item/single-item';

// Service import for items
import { ItemApi } from '../../services/service';

// The component imports the specific parts from the html and scss file.
// The Http provider is included to make the API call to the service.
@Component({
  selector: 'page-category',
  templateUrl: 'category.html',
  providers: [Http]
})

export class CategoryPage {

  // The items array to populate with data is created
  category: any;
  items: any;
  modifiedData: any;
  categoryFilter: any;

  constructor(
              public navCtrl: NavController,
              private navParams:NavParams,
              private itemApi: ItemApi
            )
            {
              this.category = this.navParams.data;
              console.log(this.category);
            }

  // ------------------------------------------------------------------------------------------
  // FUNCTIONS
  // ------------------------------------------------------------------------------------------

  // This is where the data loads from the service.
  // It happens when the view loads for the first time.
  ionViewDidLoad() {

    // Get the JSON data from our itemApi
    this.itemApi.getFilteredItems(this.category).then(data => this.items = data);
    console.log(this.items);
  }

  // This function filters the array to only include items in the specified category
  filterData() {
    this.items = this.items.filter(item => item.category == 'Fantasticness')
  }

  // This function is an event to listen to clicks on elements.
  // The SingleItem Page has been included to be passed in this function.
  itemTapped($event, item) {
    this.navCtrl.push(SingleItem, item);
  }


}

The filterData function works but in this I have hardcoded the category. I would like to be able to pass it with the navParams and call the getFilteredItems service. However, it is not working. Do you have any idea how to solve it?

10
  • console.log(this.items); you are logging outside then.. did you try inside? Commented May 1, 2017 at 12:25
  • Yes it still works fine when it is inside. Commented May 1, 2017 at 13:04
  • so what do you mean its not working? the value is set.. Commented May 1, 2017 at 13:11
  • The getFilteredItems is returning all the data and not the subset of data where category: 'Fantasticness'. The Fantasticness is passed from navParams but it's not passed as the param in the service apparently. Commented May 1, 2017 at 13:15
  • stackoverflow.com/a/35514351/4826457 Commented May 1, 2017 at 13:23

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.