Tapuscrit chaîne JSON à la classe

Permettez-être cette chaîne JSON:

[
    {
        "id": 1,
        "text": "Jon Doe"
    },
    {
        "id": 1,
        "text": "Pablo Escobar"
    }
]

Permettez-être de cette classe:

export class MyObject{
    id: number;
    text: string;
}

Comment puis-je convertir cette chaîne JSON à la liste des MyObject?

Si je fais:

console.log(<MyObject[]>JSON.parse(json_string));

Elle retourne une liste de Object au lieu d'une liste de MyObject

InformationsquelleAutor Ben | 2016-10-21
  1. 7

    Vous n'avez pas nécessairement besoin d'une classe ici. Vous pouvez simplement utiliser une interface

    export interface MyObject{
  id: number;
  text: string;
}

    Alors vous pouvez simplement écrire:

    var myObjArray : MyObject[] =  [
  {
    "id": 1,
    "text": "Jon Doe"
  },
  {
    "id": 1,
    "text": "Pablo Escobar"
  }
];

    Si vous avez des données à partir du serveur, vous aurez probablement dans une variable de type quelconque, et vous pouvez l'affecter à un tableau de ce type et il va fonctionner comme prévu.

    var data: any = getFromServer();
var myObjectArray:MyObject[] = data;

    En caractères d'imprimerie vous n'avez pas besoin d'une classe implémentant une interface. Tout littéral d'objet qui satisfait à l'interface du contrat ne pourra le faire.

    Si vos données sont toujours en lice pour vous pouvez simplement utiliser JSON.parse(jsonString) pour analyser la chaîne à des objets JavaScript.

    Voir aire de jeux ici

    • Thanl vous pour votre réponse. Mais l'objet retourné est pas encore une MyObject type. Lorsque j'ouvre une session dans la console il dit que c'est un Object. Ce que je fais mal?
    • Il n'a pas besoin de dire MyObject, il va fonctionner. Tapuscrit types sont plus au sujet de décrire la forme d'un Objet Javascript. Si l'objet remplit le contrat, elle doit être fine. Est-t-il une erreur que vous obtenez? L'Objet que vous voyez dans la console de l'id et les propriétés de texte ? Si donc, il faut travailler.
    • Et depuis Monobjet est maintenant une interface, il n'aura pas de réelle présence dans le JS de sortie, les interfaces sont balayées par TS de compilation, ils sont juste là pour vous permettre de décrire la forme des objets JS
    • Oui, l'objet a les propriétés. Mais ce que je ne comprends pas, c'est que si j'instancie un nouveau MyObject et de cartographier les propriétés, la console de montrer la MyObject type.
    • Et si la donnée JSON ne correspondent pas à la description de la classe (par exemple si le JSON a une propriété qui n'existe pas dans la classe), les objets générés encore avoir cette propriété. Ne devrait-il pas jeter une erreur?
    • Si le JSON ne correspond pas à la description il n'y aura pas d'erreur, vous ne pouvez pas accéder à toutes les propriétés supplémentaires de la machine (sauf si vous les ajoutez à l'interface)
    • Nitzan Tomer est à droite sur l'utilisation de classes si vous prévoyez d'avoir aussi des méthodes, mais si vous cherchez juste un simple objet pour contenir des données il n'est pas nécessaire de créer un supplément de satc

    InformationsquelleAutor Titian Cernicova-Dragomir
  2. 4

    Vous aurez besoin de créer un constructeur pour votre classe, et de l'appeler pour chaque élément de la liste que vous recevez.

    export class MyObject{
    constructor(public id: number, public text: string) { }
}

let data = [
  {
    "id": 1,
    "text": "Jon Doe"
  },
  {
    "id": 1,
    "text": "Pablo Escobar"
  }
];

let objects = data.map(o => new MyObject(o.id, o.text));

    Vous pouvez le vérifier dans la cour de récréation ici.

    • J'ai vu dans de nombreux postes qu'il est possible de le faire sans carte de chaque propriété, comme suggéré par @Titien Cernicova-Dragomir. Qu'est-ce que la vérité? Est-il vraiment un moyen de le faire sans de la cartographie?
    • Cela dépend de ce que vous cherchez. Si vous voulez un objet de données seulement alors vous pouvez aller avec des interfaces comme TitianCernicovaDragomir répondu. Cependant, si vous souhaitez ont également des méthodes sur les objets que vous avez besoin d'instancier des instances de classe, et toskv solution est celle que vous cherchez.
    • si vous avez besoin d'ajouter un peu plus de méthodes que vous besoin de ma solution, si vous avez juste besoin d'utiliser les objets comme ils viennent de le serveur de l'interface de la solution est plus appropriée. 🙂
    • la fonction semble bon sur const données JSON, mais il n'est pas applicable sur le type de HTTPResponse. Merci quand même.
    • vous ne précisez pas la façon dont vous arrivez à obtenir le tableau. Je viens de commencer à partir de la matrice de partir. 🙂
    InformationsquelleAutor toskv
  3. 1

    Il y a un problème quand MyObject a plus de 50 propriétés...

    Ajouter un constructeur dans votre MyObject classe de sorte qu'elle s'étend votre objet json.

    export class MyObject {
    constructor( json: any )
    {
      $.extend(this, json);
    }
    id : number;
    text : string;

    methodOnMyObject() {...}
}

    Dans votre ajax de rappel, de créer l'objet Monobjet de votre Objet json:

    let newObject = new MyObject( json );
newObject.methodOnMyObject();

    J'ai détaillé la solution dans ce post.

    • Si vous souhaitez utiliser jquery $.étendre la méthode dans votre tapuscrit fichier dont vous avez besoin pour permettre à jquery dans votre tapuscrit d'abord les fichiers en cours d'exécution npm install --save @types/jquery voir cette réponse.
    • Ne devrait-elle pas être let newObject = new MyObject( JSON.parse(json) ); à la place?
    InformationsquelleAutor Anthony Brenelière
  4. 0

    Un moyen de plus pour obtenir ceci:

    var data: any = getFromServer();
var myObjectArray = data as MyObject;

    Ou:

    var data: any = getFromServer();
var myObjectArray = <MyObject>dataMyObject;
    InformationsquelleAutor OlegI