Estoy tratando de acceder a JSON desde la plantilla html angular. Pero no está dando resultados. Simplemente mostrando Objeto o error por modificación de código.
servidor.js
response.status(200).json(results.rows);producto.componente.ts
export class ProductsComponent implements OnInit { products = {}; usersJson: any[]=[]; constructor(private service: Service) { } ngOnInit(): void { this.service.getResult().subscribe((data: JSON)=>{ console.log(data); this.products = data; this.usersJson = Array.of(data); console.log(this.products); }) }datos
data = [ {product_id: 1, product_name:"Phone"}, {product_id: 2, product_name:"laptop"} ]producto.componente.html
<p>{{ products}}</p> <h1>Product</h1> <p>{{ products[0].product_id}}</p> <p>{{usersJson[0]}}</p> <p>{{usersJson[0].product_id}}</p>Intenta usar json pipe y '.?' notación para asegurar que no habrá problemas con campos indefinidos:
<p>{{ products | json }}</p> <h1> Product </h1> <p>{{ products[0] != null ? ( products[0]?.product_id | json ) : 'N/A' }}</p> <p>{{ usersJson[0] != null ? ( usersJson[0] | json ) : 'N/A' }}</p> <p>{{ usersJson[0]?.product_id }}</p>NOTA: Si product_id es un número/cadena y no un objeto, cambie
( products[0]?.product_id | json )a
( products[0]?.product_id ) [just delete the json pipe in that line]