angular - Typescript: Konverter JSON-objekt til en klasse-/interface-objekt

Jeg prøver å konvertere et API-svar til en TypeScript-klasse/grensesnitt.

Her returnerer API-en en liste over objekter med noen egenskaper, men jeg trenger bare noen få av egenskapene til responsobjektet.

API-respons eksempel:

    [{
    'Id' : 1,
    'Name': 'test',
    'Description: 'Test',
    'PropertyX': 'x',
    'PropertyY' : 'y'
    },
    ...]

Typescript-klasse


    Class Response {
     Id: string;
     Name: string;
    }

Kan du vennligst foreslå for meg hva som vil være den beste tilnærmingen for å konvertere JSON-objektet til et TypeScript-objekt.

Svar #1

Jeg vil foreslå å lage et grensesnitt som beskriver egenskapene du bruker i appen din og ignorere resten:

Så forutsatt at svaret ditt ser slik ut:

const response = [{
      'Id' : 1,
      'Name': 'test',
      'Description': 'Test',
      'PropertyX': 'x',
      'PropertyY' : 'y'
    }, {
      'Id' : 2,
      'Name': 'test2',
      'Description': 'Test2',
      'PropertyX': 'x2',
      'PropertyY' : 'y2'
    }
];

og du kun er interessert i Id og Name, bare opprett et grensesnitt slik:

interface IMyObject {
  Id: String;
  Name: String;
}

da kan du i resten av appen din caste responsen til IMyObject[]

For eksempel hvis en funksjon bruker svaret ditt:

function myFunction(response: IMyObject[]) { ... }

eller hvis du trenger å returnere den typen, kan du gjøre en direkte typekonvertering slik:

return response as MyObject[];

REDIGER: Som nevnt i kommentaren nedenfor, fjerner det å bare kaste objektet ditt til IMyObject ikke de ekstra egenskapene du ikke er interessert i.

For å gjøre det, bruk .map:

const formattedResponse: IMyObject = reponse.map(item => {
  Id: item.Id,
  Name: item.Name
});

Svar #2

Du kan bruke forEach-metoden og lage et nytt objekt med egenskapene du trenger.

myarray=[];
 ngOnInit() {
     this.myvalues();

  }


    myMethod()
        {
           const response = [{
            'Id' : 1,
            'Name': 'test',
            'Description': 'Test',
            'PropertyX': 'x',
            'PropertyY' : 'y'
          }, {
            'Id' : 2,
            'Name': 'test2',
            'Description': 'Test2',
            'PropertyX': 'x2',
            'PropertyY' : 'y2'
          }
        ];

        response.forEach(value=>{
         this.myarray.push(
               {
                'ID':value.Id,
               'Name':value.Name
              }
            )
        });
        console.log(this.myarray);

ARBEIDENDE DEMO

Relaterte artikler