I am new to Ionic and trying to pass api from providers to application's ts page but I am getting an error, maybe I am passing the wrong id.
TS part:
export class CardsPage {
currentItems: Item[];
id: any;
getData: Object;
categories;
constructor(public navCtrl: NavController, public api:Api, navParams:
NavParams, items: Items, public http: HttpClient) {
this.id = navParams.get('idName') ||'';
console.log(this.id);
this.api.getCategoryPosts(this.id).subscribe(data=>{
console.log(data)
this.getData = data
},err=>{
console.log(err)
})
}
openItem(item){
this.navCtrl.push('ItemDetailPage', {
itemName: item
});
}
}
Api:
getCategoryPosts(category: any) {
return this.http.get(`${this.api_url}/posts?categories=${category.id}`);
}
I have posted the code part about my API and ts file now I want to pass data to next page using parameters. I wanted to know what should I pass in parameter to get data displayed in next page
According to your code, You are passing id directly to the Service's getCategoryPosts method. Therefore use category instead of category.id as below.
getCategoryPosts(category: any) {
return this.http.get(`${this.api_url}/posts?categories=${category}`);
}
Related
I have two pages: tab2 and request. When I click the button on tab2 I want to send id data to the request page. I don't want to use local storage, i tried:
tab2.page.ts
clickFunc(){
this.router.navigate(['/request', id]);
}
request.page.ts
this.router.params.subscribe(params => {
console.log(params['id']); //it gives undefined.
});
When i receive the id values, request pg gives error.
Change the code in the request.page.ts file as mentioned below:
import { ActivatedRoute, Router } from '#angular/router';
constructor(private route: ActivatedRoute, private router: Router)
{
this.route.queryParams.subscribe(params => {
console.log(params['id']); // This will give you the id param's value
});
}
I hope it helps!
Here is the code and I am receiving an error while passing this parameter from services.
export class CardsPage {
currentItems: Item[];
id: any;
getData: Object;
categories:any;
constructor(public navCtrl: NavController, public api:Api, navParams:
NavParams, items: Items, public http: HttpClient) {
this.id = navParams.get('idName') ||'';
console.log(this.id);
this.api.getCategoryPosts(this.id).subscribe(data=>{
console.log(data)
this.getData = data
},err=>{
console.log(err)
})
}
openItem(item){
this.navCtrl.push('ItemDetailPage', {
itemName: item
});
}
}
Here is my Ts file:
getCategoryPosts(category: any) {
return this.http.get(`${this.api_url}/posts?
categories=${category.id}`);
}
The error that i am receiving is Reference error: category is not defined Reference error. Category is not defined at new CardsPage
Hello just use ionViewWillEnter to get your parameter and no need to use OR operation while getting parameter so here is the solution.
ionViewWillEnter(){
this.id = navParams.get('idName')
}
then use ionViewDidEnter to fetch data through service.
ionViewDidEnter(){
this.api.getCategoryPosts(this.id).subscribe(data=>{
console.log(data)
this.getData = data
},err=>{
console.log(err)
})
}
It works but i anot getting the results it should sort. I am getting the same results regardless what i type in the searchbar
I want it to sort like autocomplete. to show results of what i type in the search bar
search.ts
#Component({ selector: "page-search", templateUrl: "search.html" })
export class SearchPage {
filter: string = '';
public userDetails: any;
public resposeData: any;
public dataSet: any;
public userSet: any;
public mediaSet: any;
public noRecords: boolean;
userPostData = {
uid: "",
token: "",
username: "",
bio: ""
};
constructor(
public common: Common,
public navCtrl: NavController,
public app: App,
public menu: MenuController,
public authService: AuthService,
public http: Http,
platform: Platform,
statusBar: StatusBar,
splashScreen: SplashScreen
) {
this.initializeItems();
this.mostmediaList();
}
initializeItems() {
return this.userPostData;
}
getItems(ev: any) {
this.initializeItems();
let val = ev.target.value;
if (val && val.trim() != '') {
this.authService.postData(this.userPostData, "userGroupSearch").then(
result => {
this.resposeData = result;
if (this.resposeData.allArtistsData) {
this.userSet = this.resposeData.allArtistsData;
console.log(this.userSet);
} else {
console.log("No access");
}
},
);
}
}
Since your code is wrapped into
if (this.resposeData.items) {
//some code
}
we know for sure that this.resposeData is not an array, since it has an items member (otherwise your code inside the if would not be executed and hence you would not get an error as in the case we have).
Since you call the parameter items at
this.userSet = this.resposeData.filter((items) => {
//some code
};
it is safe to assume that you wanted to filter this.resposeData.items instead of this.resposeData. So, you will need to make sure it is an array at the if
if (this.resposeData.items && Array.isArray(this.resposeData.items)) {
//some code
}
and filter this.resposeData.items instead of this.resposeData:
this.userSet = this.resposeData.items.filter((items) => {
//some code
};
I am storing a user id in the storage and trying to get the stored id when the page is loaded.
Below is the code snippet
constructor(
private nav: NavController,
private auth: AuthService,
public clockservice: ClockService,
private alertCtrl: AlertController,
private loadingCtrl: LoadingController,
public storage: Storage
) {
storage.get('name').then(val => {
this.username = val;
})
storage.get('id').then(val => {
this.userid = val;
console.log(this.userid);
})
}
ngOnInit() {
console.log("inside");
console.log(this.userid);
getStatus();
}
getStatus() {
this.showLoading();
this.clockservice.getinoutstatus(this.userid).subscribe(
result => {
if (result.success) {
// do something here
} else {
this.showError("API Error.");
}
this.loading.dismiss();
},
error => {
this.showError("API Error.");
}
);
}
The issue I face is the user id is not received in the ngOnInit event. The console log shows the ngOnInit is called even before the user id is received in the constructor.
console log:
inside
1
How to make sure that is ngOnInit even is called after all the get values received in the constructor?
The simplest solution would be to perform a Promise.all to wait for both storage values to be retrieved and to then call getStatus:
ngOnInit() {
Promise.all([
this.storage.get('name'),
this.storage.get('id')
])
.then(([name, id]) => {
this.username = name;
this.userid = id;
getStatus();
})
.catch(error => {
this.showError("Storage Error.");
});
}
Retrieving the storage values in the constructor would be okay, but - looking at the implementation - it seems likely that getStatus should not be called before ngOnInit. So move the storage calls and the promise chain into ngOnInit
I created a dynamic form following the instructions in the angular cookbook and then I've tried to create the form with metadata that I have in my database.
I made an HTTP request to the get field types, names, ids, etc. but when I try to build the form as in the angular example, nothing happens or I get errors on console.
Here's the code from the tutorial:
export class AppComponent {
questions: any[];
constructor(service: QuestionService) {
this.questions = service.getQuestions();
}
}
And this is what I did:
export class AppComponent implements OnInit {
campos: any[] = [];
constructor(private servico: FormDadosService) {}
ngOnInit() {
this.servico.getCampos().subscribe(this.processaCampos);
}
processaCampos(dados) {
for (let i = 0; i < dados.length; i++) {
this.campos.push(new CampoBase({
nome: dados[i].ZI2_NOME,
label: dados[i].ZI2_DESC,
ordem: dados[i].ZI2_ORDEM,
obrigatorio: dados[i].ZI2_OBRIGAT,
tamanho: dados[i].ZI2_TAM,
valor: '',
tipoCampo: dados[i].ZI2_TIPO
}))
}
}
}
I am getting this error:
error_handler.js:50EXCEPTION: Cannot read property 'push' of undefined
I think I need to know a way to render the form after all data about it has arrived from my HTTP request.
I made it work this way:
export class AppComponent implements OnInit {
campos: any[] = [];
constructor(private servico: FormDadosService) { }
ngOnInit() {
this.servico.getCampos().subscribe((data) => {
data.forEach(campo => {
this.campos.push(new CampoBase({
valor: '',
nome: campo.ZI2_CAMPO,
label: campo.ZI2_DESC,
tipoCampo: campo.ZI2_TIPO,
tamanho: campo.ZI2_TAM
}))
});
});
}
}
This question can be marked as solved.
Thanks everyone.