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?
console.log(this.items);you are logging outsidethen.. did you try inside?