Bagaimana cara melemparkan objek JSON ke kelas naskah

Saya membaca objek JSON dari server REST jauh. Objek JSON ini memiliki semua properti dari kelas naskah (menurut desain). Bagaimana cara melemparkan objek JSON yang diterima ke tipe var?

Saya tidak ingin mengisi var naskah (yaitu memiliki konstruktor yang mengambil objek JSON ini). Ini besar dan menyalin segala sesuatu di seluruh sub-objek dengan sub-objek & properti dengan properti akan membutuhkan banyak waktu.

Pembaruan: Namun Anda dapat melemparkannya ke antarmuka naskah!

Anda tidak dapat dengan mudah memasukkan hasil JavaScript lama-polos dari permintaan Ajax ke instance kelas JavaScript / TypeScript. Ada sejumlah teknik untuk melakukannya, dan umumnya melibatkan menyalin data. Kecuali Anda membuat instance kelas, itu tidak akan memiliki metode atau properti. Ini akan tetap menjadi objek JavaScript sederhana.

Sementara jika Anda hanya berurusan dengan data, Anda bisa melakukan cast ke antarmuka (karena ini murni struktur waktu kompilasi), ini akan mengharuskan Anda menggunakan kelas TypeScript yang menggunakan instance data dan melakukan operasi dengan data itu.

Beberapa contoh menyalin data:

1. Menyalin objek AJAX JSON ke Objek yang ada
2. Parsing String JSON menjadi Prototipe Objek Tertentu dalam JavaScript

Intinya, Anda baru saja:

var d = new MyRichObject();
d.copyInto(jsonResult);

Saya memiliki masalah yang sama dan saya telah menemukan perpustakaan yang melakukan pekerjaan: https://github.com/pleerock/class-transformer .

Ini berfungsi seperti ini:

let jsonObject = response.json() as Object;
let fooInstance = plainToClass(Models.Foo, jsonObject);
return fooInstance;

Ini mendukung anak-anak yang bersarang tetapi Anda harus mendekorasi anggota kelas Anda.

Dalam TypeScript Anda dapat melakukan pernyataan tipe menggunakan antarmuka dan generik seperti:

var json = Utilities.JSONLoader.loadFromFile("../docs/location_map.json");
var locations: Array<ILocationMap> = JSON.parse(json).location;

Di mana ILocationMap menjelaskan bentuk data Anda. Keuntungan dari metode ini adalah bahwa JSON Anda bisa mengandung lebih banyak properti tetapi bentuknya memenuhi kondisi antarmuka.

Saya harap itu membantu!

Jika Anda menggunakan ES6, coba ini:

class Client{
  name: string

  displayName(){
    console.log(this.name)
  }
}

service.getClientFromAPI().then(clientData => {

  // Here the client data from API only have the "name" field
  // If we want to use the Client class methods on this data object we need to:
  let clientWithType = Object.assign(new Client(), clientData)

  clientWithType.displayName()
})

Tetapi cara ini tidak akan bekerja pada objek sarang , sedihnya.

Saya menemukan artikel yang sangat menarik tentang pengecoran generik JSON ke Kelas Script:

http://cloudmark.github.io/Json-Mapping/

Anda berakhir dengan kode berikut:

let example = {
                "name": "Mark", 
                "surname": "Galea", 
                "age": 30, 
                "address": {
                  "first-line": "Some where", 
                  "second-line": "Over Here",
                  "city": "In This City"
                }
              };

MapUtils.deserialize(Person, example);  // custom class

TLDR: Satu liner

// This assumes your constructor method will assign properties from the arg.
.map((instanceData: MyClass) => new MyClass(instanceData));

Jawaban Terperinci

Saya tidak akan merekomendasikan pendekatan Object.assign, karena dapat secara tidak tepat mengotori instance kelas Anda dengan properti yang tidak relevan (serta penutupan yang ditentukan) yang tidak dideklarasikan di dalam kelas itu sendiri.

Di kelas Anda mencoba deserialize ke, saya akan memastikan properti apa pun yang Anda inginkan deserialized didefinisikan (null, array kosong, dll). Dengan mendefinisikan properti Anda dengan nilai awal, Anda mengekspos visibilitas mereka ketika mencoba untuk mengulangi anggota kelas untuk memberikan nilai (lihat metode deserialize di bawah).

export class Person {
  public name: string = null;
  public favoriteSites: string[] = [];

  private age: number = null;
  private id: number = null;
  private active: boolean;

  constructor(instanceData?: Person) {
    if (instanceData) {
      this.deserialize(instanceData);
    }
  }

  private deserialize(instanceData: Person) {
    // Note this.active will not be listed in keys since it's declared, but not defined
    const keys = Object.keys(this);

    for (const key of keys) {
      if (instanceData.hasOwnProperty(key)) {
        this[key] = instanceData[key];
      }
    }
  }
}

Pada contoh di atas, saya cukup membuat metode deserialize. Dalam contoh dunia nyata, saya akan membuatnya terpusat di kelas dasar yang dapat digunakan kembali atau metode layanan.

Berikut adalah cara memanfaatkan ini dalam sesuatu seperti resp http ...

this.http.get(ENDPOINT_URL)
  .map(res => res.json())
  .map((resp: Person) => new Person(resp) ) );

Jika tslint / ide mengeluh tentang tipe argumen yang tidak kompatibel, cukup masukkan argumen ke tipe yang sama menggunakan kurung sudut <YourClassName>, contoh:

const person = new Person(<Person> { name: 'John', age: 35, id: 1 });

Jika Anda memiliki anggota kelas yang memiliki tipe tertentu (alias: instance dari kelas lain), maka Anda dapat meminta mereka memasukkannya ke dalam instance yang diketik melalui metode pengambil / penyetel.

export class Person {
  private _acct: UserAcct = null;
  private _tasks: Task[] = [];

  // ctor & deserialize methods...

  public get acct(): UserAcct {
    return this.acct;
  }
  public set acct(acctData: UserAcct) {
    this._acct = new UserAcct(acctData);
  }

  public get tasks(): Task[] {
    return this._tasks;
  }

  public set tasks(taskData: Task[]) {
    this._tasks = taskData.map(task => new Task(task));
  }
}

Contoh di atas akan menghapus daftar sertifikat dan daftar tugas ke dalam instance kelas masing-masing.

Dengan asumsi json memiliki properti yang sama dengan kelas naskah Anda, Anda tidak perlu menyalin properti Json Anda ke objek naskah Anda. Anda hanya perlu membangun objek skrip Anda melewati data json di konstruktor.

Dalam panggilan balik ajax Anda, Anda menerima perusahaan:

onReceiveCompany( jsonCompany : any ) 
{
   let newCompany = new Company( jsonCompany );

   // call the methods on your newCompany object ...
}

Untuk membuatnya bekerja:

1) Tambahkan konstruktor di kelas naskah Anda yang menggunakan data json sebagai parameter. Dalam konstruktor yang Anda memperpanjang objek json Anda dengan jQuery, seperti ini: $.extend( this, jsonData). $ .extend memungkinkan menjaga prototipe javascript sambil menambahkan properti objek json.

2) Catatan Anda harus melakukan hal yang sama untuk objek yang ditautkan. Dalam kasus Karyawan dalam contoh, Anda juga membuat konstruktor yang mengambil bagian dari data json untuk karyawan. Anda memanggil $ .map untuk menerjemahkan karyawan json ke objek naskah skrip Karyawan.

export class Company
{
    Employees : Employee[];

    constructor( jsonData: any )
    {
        $.extend( this, jsonData);

        if ( jsonData.Employees )
            this.Employees = $.map( jsonData.Employees , (emp) => {
                return new Employee ( emp );  });
    }
}

export class Employee
{
    name: string;
    salary: number;

    constructor( jsonData: any )
    {
        $.extend( this, jsonData);
    }
}

Ini adalah solusi terbaik yang saya temukan ketika berhadapan dengan kelas-kelas TypeScript dan objek json.

Tidak ada yang belum secara otomatis memeriksa apakah objek JSON yang Anda terima dari server memiliki properti antarmuka typescript yang diharapkan (baca sesuai dengan). Tapi Anda bisa menggunakannya Penjaga Tipe Buatan Pengguna

Mempertimbangkan antarmuka berikut dan objek json konyol (bisa jenis apa saja):

interface MyInterface {
    key: string;
 }

const json: object = { "key": "value" }

Tiga cara yang mungkin:

A. Ketikkan Penegasan atau pemeran statis sederhana yang ditempatkan setelah variabel

const myObject: MyInterface = json as MyInterface;

B. Pemain statis sederhana, sebelum variabel dan antara berlian

const myObject: MyInterface = <MyInterface>json;

C. Pemain dinamis canggih, Anda memeriksa sendiri struktur objek

function isMyInterface(json: any): json is MyInterface {
    // silly condition to consider json as conform for MyInterface
    return typeof json.key === "string";
}

if (isMyInterface(json)) {
    console.log(json.key)
}
else {
        throw new Error(`Expected MyInterface, got '${json}'.`);
}

Anda dapat bermain dengan contoh ini di sini

Perhatikan bahwa kesulitannya adalah menulis isMyInterfacefungsi. Saya berharap TS akan menambahkan dekorator cepat atau lambat untuk mengekspor pengetikan kompleks ke runtime dan membiarkan runtime memeriksa struktur objek saat diperlukan. Untuk saat ini, Anda bisa menggunakan validator skema json yang tujuannya kira-kira sama ATAU generator fungsi pemeriksaan tipe runtime ini

Dalam kasus saya ini berfungsi. Saya menggunakan fungsi Object.assign (target, sumber ...) . Pertama, pembuatan objek yang benar, kemudian menyalin data dari objek json ke target. Contoh:

let u:User = new User();
Object.assign(u , jsonUsers);

Dan contoh penggunaan yang lebih maju. Contoh menggunakan array.

this.someService.getUsers().then((users: User[]) => {
  this.users = [];
  for (let i in users) {
    let u:User = new User();
    Object.assign(u , users[i]);
    this.users[i] = u;
    console.log("user:" + this.users[i].id);
    console.log("user id from function(test it work) :" + this.users[i].getId());
  }

});

export class User {
  id:number;
  name:string;
  fullname:string;
  email:string;

  public getId(){
    return this.id;
  }
}

Meskipun tidak casting per se; Saya telah menemukan https://github.com/JohnWhiteTB/TypedJSON sebagai alternatif yang bermanfaat.

@JsonObject
class Person {
    @JsonMember
    firstName: string;

    @JsonMember
    lastName: string;

    public getFullname() {
        return this.firstName + " " + this.lastName;
    }
}
var person = TypedJSON.parse('{ "firstName": "John", "lastName": "Doe" }', Person);

person instanceof Person; // true
person.getFullname(); // "John Doe"

Anda bisa membuat interfacetipe Anda ( SomeType) dan melemparkan objek ke dalamnya.

const typedObject: SomeType = <SomeType> responseObject;

Jika Anda perlu melemparkan objek json Anda ke kelas naskah dan memiliki metode instance yang tersedia di objek yang dihasilkan yang perlu Anda gunakan Object.setPrototypeOf, seperti yang saya lakukan dalam potongan kode di bawah:

Object.setPrototypeOf(jsonObject, YourTypescriptClass.prototype)

Pertanyaan lama dengan sebagian besar jawaban yang benar, tetapi tidak terlalu efisien. Inilah yang saya usulkan:

Buat kelas dasar yang berisi metode init () dan metode cast statis (untuk objek tunggal dan array). Metode statis bisa di mana saja; versi dengan kelas dasar dan init () memungkinkan ekstensi yang mudah sesudahnya.

export class ContentItem {
    // parameters: doc - plain JS object, proto - class we want to cast to (subclass of ContentItem)
    static castAs<T extends ContentItem>(doc: T, proto: typeof ContentItem): T {
        // if we already have the correct class skip the cast
        if (doc instanceof proto) { return doc; }
        // create a new object (create), and copy over all properties (assign)
        const d: T = Object.create(proto.prototype);
        Object.assign(d, doc);
        // reason to extend the base class - we want to be able to call init() after cast
        d.init(); 
        return d;
    }
    // another method casts an array
    static castAllAs<T extends ContentItem>(docs: T[], proto: typeof ContentItem): T[] {
        return docs.map(d => ContentItem.castAs(d, proto));
    }
    init() { }
}

Mekanika serupa (dengan assign () ) telah disebutkan dalam pos @ Adam111p. Hanya cara lain (lebih lengkap) untuk melakukannya. @Timothy Perez kritis terhadap assign () , tetapi jika itu sepenuhnya sesuai di sini.

Menerapkan kelas turunan (nyata):

import { ContentItem } from './content-item';

export class SubjectArea extends ContentItem {
    id: number;
    title: string;
    areas: SubjectArea[]; // contains embedded objects
    depth: number;

    // method will be unavailable unless we use cast
    lead(): string {
        return '. '.repeat(this.depth);
    }

    // in case we have embedded objects, call cast on them here
    init() {
        if (this.areas) {
            this.areas = ContentItem.castAllAs(this.areas, SubjectArea);
        }
    }
}

Sekarang kita bisa melemparkan objek yang diambil dari layanan:

const area = ContentItem.castAs<SubjectArea>(docFromREST, SubjectArea);

Semua hierarki objek SubjectArea akan memiliki kelas yang benar.

Sebuah use case / example; buat layanan Angular (kelas dasar abstrak lagi):

export abstract class BaseService<T extends ContentItem> {
  BASE_URL = 'http://host:port/';
  protected abstract http: Http;
  abstract path: string;
  abstract subClass: typeof ContentItem;

  cast(source: T): T {
    return ContentItem.castAs(source, this.subClass);
  }
  castAll(source: T[]): T[] {
    return ContentItem.castAllAs(source, this.subClass);
  }

  constructor() { }

  get(): Promise<T[]> {
    const value = this.http.get(`${this.BASE_URL}${this.path}`)
      .toPromise()
      .then(response => {
        const items: T[] = this.castAll(response.json());
        return items;
      });
    return value;
  }
}

Penggunaannya menjadi sangat sederhana; buat layanan Area:

@Injectable()
export class SubjectAreaService extends BaseService<SubjectArea> {
  path = 'area';
  subClass = SubjectArea;

  constructor(protected http: Http) { super(); }
}

get () metode layanan akan mengembalikan Janji array yang sudah dilemparkan sebagai objek SubjectArea (seluruh hierarki)

Sekarang katakanlah, kita memiliki kelas lain:

export class OtherItem extends ContentItem {...}

Membuat layanan yang mengambil data dan melakukan cast ke kelas yang benar adalah sesederhana:

@Injectable()
export class OtherItemService extends BaseService<OtherItem> {
  path = 'other';
  subClass = OtherItem;

  constructor(protected http: Http) { super(); }
}

Gunakan kelas yang diperluas dari antarmuka.

Kemudian:

Object.assign(
                new ToWhat(),
                what
              )

Dan terbaik:

Object.assign(
                    new ToWhat(),
                    <IDataInterface>what
                  )

ToWhat menjadi pengontrol DataInterface.

https://jvilk.com/MakeTypes/

Anda dapat menggunakan situs ini untuk menghasilkan proxy untuk Anda. ini menghasilkan kelas dan dapat mengurai dan memvalidasi objek JSON input Anda.

Dalam lates TS Anda dapat melakukan hal ini:

const isMyInterface = (val: any): val is MyInterface => {
  if (!val) { return false; }
  if (!val.myProp) { return false; }
  return true;
};

Dan daripada pengguna seperti ini:

if (isMyInterface(data)) {
 // now data will be type of MyInterface
}

Saya bertemu dengan kebutuhan yang sama. Saya menginginkan sesuatu yang akan memberi saya transformasi mudah dari / ke JSON yang berasal dari panggilan api REST ke / dari definisi kelas tertentu. Solusi yang saya temukan tidak cukup atau dimaksudkan untuk menulis ulang kode kelas saya dan menambahkan anotasi atau similars.

Saya ingin sesuatu seperti GSON digunakan di Jawa untuk membuat serial / deserialize kelas ke / dari objek JSON.

Dikombinasikan dengan kebutuhan nanti, bahwa konverter akan berfungsi di JS juga, saya akhirnya menulis paket saya sendiri.

Meskipun demikian, sedikit overhead. Tetapi ketika mulai sangat nyaman dalam menambah dan mengedit.

Anda menginisialisasi modul dengan:

1. skema konversi - memungkinkan untuk memetakan antar bidang dan menentukan bagaimana konversi akan dilakukan
2. Array peta kelas
3. Peta fungsi konversi - untuk konversi khusus.

Kemudian dalam kode Anda, Anda menggunakan modul yang diinisialisasi seperti:

const convertedNewClassesArray : MyClass[] = this.converter.convert<MyClass>(jsonObjArray, 'MyClass');

const convertedNewClass : MyClass = this.converter.convertOneObject<MyClass>(jsonObj, 'MyClass');

atau, ke JSON:

const jsonObject = this.converter.convertToJson(myClassInstance);

Gunakan tautan ini ke paket npm dan juga penjelasan terperinci tentang cara bekerja dengan modul: json-class-converter

Juga dibungkus untuk
penggunaan sudut dalam: angular-json-class-converter

Berikan objek apa adanya ke konstruktor kelas; Tidak ada konvensi atau pemeriksaan

interface iPerson {
   name: string;
   age: number;
}

class Person {
   constructor(private person: iPerson) { }

   toString(): string {
      return this.person.name + ' is ' + this.person.age;
   }  
}


// runs this as // 
const object1 = { name: 'Watson1', age: 64 };
const object2 = { name: 'Watson2' };            // age is missing

const person1 = new Person(object1);
const person2 = new Person(object2 as iPerson); // now matches constructor

console.log(person1.toString())  // Watson1 is 64
console.log(person2.toString())  // Watson2 is undefined

Anda dapat menggunakan paket npm ini. https://www.npmjs.com/package/class-converter

Mudah digunakan, misalnya:

class UserModel {
  @property('i')
  id: number;

  @property('n')
  name: string;
}

const userRaw = {
  i: 1234,
  n: 'name',
};

// use toClass to convert plain object to class
const userModel = toClass(userRaw, UserModel);
// you will get a class, just like below one
// const userModel = {
//   id: 1234,
//   name: 'name',
// }

Secara pribadi saya menemukan itu mengerikan bahwa naskah tidak mengizinkan definisi titik akhir untuk menentukan jenis objek yang diterima. Tampaknya memang demikian, saya akan melakukan apa yang telah saya lakukan dengan bahasa lain, dan itu adalah bahwa saya akan memisahkan objek JSON dari definisi kelas, dan meminta definisi kelas menggunakan objek JSON sebagai satu-satunya anggota data .

Saya membenci kode boilerplate, jadi bagi saya biasanya masalah mendapatkan hasil yang diinginkan dengan jumlah kode paling sedikit sambil mempertahankan tipe.

Pertimbangkan definisi struktur objek JSON berikut - ini adalah apa yang akan Anda terima pada titik akhir, mereka hanya definisi struktur, tidak ada metode.

interface IAddress {
    street: string;
    city: string;
    state: string;
    zip: string;
}

interface IPerson {
    name: string;
    address: IAddress;
}

Jika kita memikirkan hal-hal di atas dalam istilah berorientasi objek, antarmuka di atas bukan kelas karena mereka hanya mendefinisikan struktur data. Kelas dalam istilah OO mendefinisikan data dan kode yang beroperasi di atasnya.

Jadi sekarang kita mendefinisikan kelas yang menentukan data dan kode yang beroperasi di dalamnya ...

class Person {
    person: IPerson;

    constructor(person: IPerson) {
        this.person = person;
    }

    // accessors
    getName(): string {
        return person.name;
    }

    getAddress(): IAddress {
        return person.address;
    }

    // You could write a generic getter for any value in person, 
    // no matter how deep, by accepting a variable number of string params

    // methods
    distanceFrom(address: IAddress): float {
        // Calculate distance from the passed address to this persons IAddress
        return 0.0;
    }
}

Dan sekarang kita bisa dengan mudah melewati objek apa pun yang sesuai dengan struktur IPerson dan berada di jalan kita ...

   Person person = new Person({
            name: "persons name",
            address: {
                street: "A street address",
                city: "a city",
                state: "a state",
                zip: "A zipcode"
            }
        });

Dengan cara yang sama kita sekarang dapat memproses objek yang diterima di titik akhir Anda dengan sesuatu di sepanjang ...

Person person = new Person(req.body);    // As in an object received via a POST call

person.distanceFrom({ street: "Some street address", etc.});

Ini jauh lebih berkinerja dan menggunakan setengah memori menyalin data, sementara secara signifikan mengurangi jumlah kode boilerplate Anda harus menulis untuk setiap jenis entitas. Itu hanya bergantung pada keamanan jenis yang disediakan oleh TypeScript.

Gunakan deklarasi 'sebagai':

const data = JSON.parse(response.data) as MyClass;

Ini adalah pilihan yang sederhana dan sangat bagus

let person = "{"name":"Sam","Age":"30"}";

const jsonParse: ((key: string, value: any) => any) | undefined = undefined;
let objectConverted = JSON.parse(textValue, jsonParse);

Dan kemudian Anda akan memilikinya

objectConverted.name

Saya menggunakan perpustakaan ini di sini: https://github.com/pleerock/class-transformer

<script lang="ts">
    import { plainToClass } from 'class-transformer';
</script>

Penerapan:

private async getClassTypeValue() {
  const value = await plainToClass(ProductNewsItem, JSON.parse(response.data));
}

Terkadang Anda harus menguraikan nilai JSON untuk plainToClass untuk memahami bahwa itu adalah data yang diformat JSON

Saya menggunakan Angular 6 di aplikasi frontend dan Spring Boot di backend yang mengembalikan Java Objects. Yang perlu saya lakukan adalah mendefinisikan kelas yang sama pada aplikasi sudut yang memiliki properti yang cocok dan kemudian saya dapat menerima objek 'sebagai' objek kelas sudut ( comp sebagai Perusahaan dalam contoh di bawah).

Lihat kode ujung depan di bawah misalnya. Beri tahu saya di komentar jika ada yang perlu lebih jelas.

  createCompany() {
    let company = new Company();
    company.name = this.companyName;

    this.companyService.createCompany(company).subscribe(comp => {
       if (comp !== null) {
        this.employerAdminCompany = comp as Company;
      }
    });
  }

di mana perusahaan adalah objek entitas dalam aplikasi boot musim semi dan juga kelas di Angular.

export class Company {
    public id: number;
    public name: string;
    public owner: User;
    public locations: Array<Location>;
}