How to show JSON parameters in HTML

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 nota

Notas

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.

Please use proper code blocks - Extended Syntax | Markdown Guide