Home / Questions / 447250
Accepted
Ivannava
Asked: 2022-04-27 07:12:23 +0800 CST 2022-04-27 07:12:23 +0800 CST

How to display the values ​​of an array that I receive from a json in Angular?

  • 772

I receive the following json:

{
    "id": "7654321212",
    "lugar": "1",
    "procedencia": "E",
    "estado": "3",
    "fecha": "20210421",
    "hora": "010821",
    "series": [
        {
            "pin": "000000",
            "status": "2"
        },
        {
            "pin": "00300",
            "status": "1"
        }}

In Angular I receive it in the following way, my model:

export class Muestras {

    id: string;
    lugar: string;
    procedencia: string;
    estado: string;
    fecha: string;
    hora: string;
    series: string;
}

In the onInit:

muestras: Muestras[];

this.muestra.getMuestras().subscribe(e => {
    this.embarques = e;

If the values ​​are printed as the id, but I can't extract the value from the series array, it can only be done from the html or it has to be from typescript.

json

1 Answers

  1. Best Answer

    The series you receive from your json is an array, to solve the problem you must define it that way.

    //ARREGLO SERIES
export class Series {
  pin: string;
  status: string;
}

//OBJETO MUESTRAS
export class Muestras {
  id: string;
  lugar: string;
  procedencia: string;
  estado: string;
  fecha: string;
  hora: string;
  series: Series[]; //Lo que recibes aquí vendría a ser un array y no un string
}

    When you receive your information in the OnInit you assign the data of your json to your model for test mode jsonInfo is included, there you would receive from your api or service.

    muestras: Muestras;

  //INFORMACIÓN DE TU JSON
  jsonInfo: any = {
    id: "7654321212",
    lugar: "1",
    procedencia: "E",
    estado: "3",
    fecha: "20210421",
    hora: "010821",
    series: [
      {
        pin: "000000",
        status: "2"
      },
      {
        pin: "00300",
        status: "1"
      }
    ]
  };

  ngOnInit() {
    //Agregas el json a tu model
    this.muestras = this.jsonInfo;

    //Imprimer tu model
    console.log(this.muestras);
  }

    I leave you the example in stackblitz Demo

    • 1