angular - Typescript: Konvertera JSON-objekt till ett klass-/gränssnittobjekt

Jag försöker konvertera ett API-svar till en TypeScript-klass/gränssnitt.

Här returnerar API:et en lista med objekt med vissa egenskaper, men jag behöver bara några av egenskaperna hos svarobjektet.

Exempel på API-svar:

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

Typescript-klass


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

Kan du vänligen föreslå för mig vad som skulle vara det bästa tillvägagångssättet för att konvertera JSON-objektet till ett TypeScript-objekt.

Svar #1

Jag skulle föreslå att skapa ett gränssnitt som beskriver de egenskaper du använder i din app och ignorera resten:

Så om vi antar att ditt svar ser ut så här:

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

och du är bara intresserad av Id och Name, skapa bara ett gränssnitt så här:

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

då kan du i resten av din app casta svaret till IMyObject[]

Till exempel om en funktion använder ditt svar:

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

eller om du behöver returnera den typen, kan du göra en direkt typomvandling på detta sätt:

return response as MyObject[];

REDIGERA: Som nämnts i kommentaren nedan, tar det inte bort de extra egenskaper som du inte är intresserad av att bara konvertera ditt objekt till IMyObject.

För att göra det, använd .map:

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

Svar #2

Du kan använda forEach-metoden och skapa ett nytt objekt med de egenskaper du behöver.

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);

ARBETANDE DEMO

Relaterade artiklar