Hello, I’ve been trying to show in my HTML page some JSON parameters that I have in my database (MongoDB), but it shows the whole JSON file instead of the parameters I want. I’ll provide code below
ts file (ver-notas.page.ts)
import { Component, OnInit } from “@angular/core”;
import { Router, ActivatedRoute, NavigationExtras } from “@angular/router”;
import { HttpClient } from “@angular/common/http”;
import { AlertController } from “@ionic/angular”;
@Component({
selector: “app-ver-notas”,
templateUrl: “./ver-notas.page.html”,
styleUrls: [“./ver-notas.page.scss”],
})
export class VerNotasPage implements OnInit {
data: any;
data1: any;
res: any;
title:any;
constructor(
private router: Router,
private route: ActivatedRoute,
private alertController: AlertController,
private http: HttpClient
) {
this.route.queryParams.subscribe((params) => {
if (params && params.res) {
this.data1 = params.res;
}
});
this.route.queryParams.subscribe((params) => {
if (params && params["email"]) {
this.data = params["email"];
}
});
}
ngOnInit() {
}
buscar() {
this.http.get(http://localhost:3000/note/${this.data}).subscribe(
(res) => {
localStorage.setItem(“blocNotes”, JSON.stringify(res));
console.log(res);
},
(error) => {
console.log(error);
this.presentAlert("Titulo no encontrado.", error.error.msg);
}
);
}
delete() {
this.http.delete(http://localhost:3000/note/${this.title}).subscribe(
(res) => {
localStorage.setItem(“blocNotes”, JSON.stringify(res));
console.log(res);
},
(error) => {
console.log(error);
this.presentAlert(“Titulo no encontrado.”, error.error.msg);
}
);
}
atras() {
let navigation: NavigationExtras = {
queryParams: {
email: this.data,
},
};
this.router.navigate(["home-note"], navigation);
}
async presentAlert(header: string, message: string) {
const alert = await this.alertController.create({
cssClass: “my-custom-class”,
header: header,
message: message,
buttons: [“OK”],
});
await alert.present();
const { role } = await alert.onDidDismiss();
console.log("onDidDismiss resolved with role", role);
}
}
html file (ver-notas.page.html):
Notas Buscar 🗑️ {{ res }}<ion-card *ngIf=“data1”>
{{data1}}
{{ data1 }}
<ion-item *ngIf=“data1”>
<ion-input value="{{data1}}"></ion-input>
other ts file (home-note.page.ts):
import { Component, OnInit } from “@angular/core”;
import { HttpClient } from “@angular/common/http”;
import { ActivatedRoute, Router, NavigationExtras } from “@angular/router”;
import { AlertController } from “@ionic/angular”;
import { stringify } from “querystring”;
@Component({
selector: “app-home-note”,
templateUrl: “./home-note.page.html”,
styleUrls: [“./home-note.page.scss”],
})
export class HomeNotePage implements OnInit {
res: any;
data: any;
constructor(
private http: HttpClient,
private router: Router,
private alertController: AlertController,
private route: ActivatedRoute
) {
this.route.queryParams.subscribe((params) => {
console.log("params ", params);
if (params && params["email"]) {
this.data = params["email"];
}
});
}
ngOnInit() {}
openDetailsWithQueryParams() {
let navigation: NavigationExtras = {
queryParams: {
email: this.data,
},
};
this.http.get(`http://localhost:3000/note/${this.data}`).subscribe(
(res) => {
localStorage.setItem("blocNotes", JSON.stringify(res));
console.log(res);
let navigationExtras: NavigationExtras = {
queryParams: {
res: JSON.stringify(res),
},
};
this.router.navigate(["ver-notas"], navigationExtras);
},
(error) => {
console.log(error);
this.presentAlert("Titulo no encontrado.", error.error.msg);
}
);
this.router.navigate(["ver-notas"], navigation);
}
verCollect() {
let navigation: NavigationExtras = {
queryParams: {
email: this.data,
},
};
this.router.navigate(["ver-collections"], navigation);
}
newNote() {
let navigation: NavigationExtras = {
queryParams: {
email: this.data,
},
};
this.router.navigate(["home-bloc"], navigation);
}
config() {
let navigation: NavigationExtras = {
queryParams: {
email: this.data,
},
};
this.router.navigate(["configuracion"], navigation);
}
async presentAlert(header: string, message: string) {
const alert = await this.alertController.create({
cssClass: “my-custom-class”,
header: header,
message: message,
buttons: [“OK”],
});
await alert.present();
const { role } = await alert.onDidDismiss();
console.log("onDidDismiss resolved with role", role);
}
}
the other html file (home-note.page.html):
Menu Nueva notaNotas
Colecciones
Configuracion
Basically I need to show all the notes that the user has in the ion card individually, parsing the title to the ion-card-title and the notes content to the ion-card-subtitle. Each note with its own individual card.
Please ask if its not clear what I’m trying to say.