DeSerializing JSON-Zeichenfolge in ein TS-Objekt

Question

Ich kämpfe über was sollte ein sehr einfaches Verfahren sein.

In der "geolocate.ts" -Funktion "setData", die Modellindizes? "Flugplan" und "Config" werden vom Chrome-Debugger als "nicht definiert" angezeigt, wenn sie von "model.flightplan" oder "model.config" referenziert werden. Das "Modell" -Objekt selbst scheint in Ordnung zu sein, selbst wenn es im Debugger expandiert ist.

Irgendwelche Gedanken oder Zeiger würden sehr geschätzt;)

geolocate.d.ts

export class FmsFlightPlan { 
    public status: string[]; 
    ... 
} 

export class Config { 
    public airportIcon: IconSettings; 
    ... 
} 

export class InitModel { 
    public config: Config; 
    public flightplan: FmsFlightPlan; 
} 

geolocate.ts

import * as passedData from "./geoLocate.d"; 

let config: passedData.Config; 
let flightPlan: passedData.FmsFlightPlan; 

export function setModel(json: string): void { 
    console.log(json); // '{"Config": { "AirportIcon": {...} ...}, {"Flightplan": {"Status": [], ... } ...}' --- As expected (JSONlint OK) 

    const model: passedData.InitModel = JSON.parse(json); 
    console.log(model); // Chrome console: {Config: {…}, Flightplan: {…}} 

    flightPlan = model.flightplan; // flightPlan and config are assigned "undefined" 
    config = model.config;  // "model" looks OK and Intellisense works. 

    flightplanDraw(); 
} 

TSC erzeugt Javascript

function setModel(o) { 
    console.log(o); 
    var e = JSON.parse(o); 
    console.log(e), flightPlan = e.flightplan, config = e.config, flightplanDraw() 
} 

.NET Core-Ansicht Javascript

function gmapsReady() { 

    initMap(); 
    $.getJSON("/Home/GetConfig", 
     null, 
     function(data) { 
      setModel(data); 
     }); 
} 

.NET MVC-Controller

public JsonResult GetConfig() 
{ 
    // Load fplan and config objects 
    ... 
    ... 

    InitModel initModel = new InitModel 
    { 
     Flightplan = fplan, 
     Config = _config 
    }; 

    string json = JsonConvert.SerializeObject(initModel); 
    return new JsonResult(json); 
} 

Answer 1

Ein erstes Problem scheint zu sein, dass Sie Felder wie flightplan und config zugreifen, während in der JSON sind sie FlightPlan und Config. Deshalb bekommst du undefined s.

Ein etwas größeres Problem danach, die Sie meistens beißen, wenn Sie über das Hinzufügen von Methoden zu Klassen planen ist, dass das Ding produziert von JSON.parse ist ein einfaches JavaScript-Objekt, während Config, FlightPlan etc sind Klassen und Instanzen sie würden zu dieser Klasse gehören. Also, wenn Sie so etwas wie dieses hatte:

let x = new Config(); 
x.airportIcon = 'foo'; 
console.log(x.constructor); // Prints 'Config' 
let y = JSON.parse('{"airportIcon": "foo"}'); 
console.log(y.constructor); // Prints 'Object something or other' 

So sind die beiden strukturell gleichwertig, aber nicht funktionell gleichwertig sein. Selbst wenn Sie einen TS-Cast durchführen, können Sie keine Funktion auf y aufrufen, wie Sie es unter x tun würden. Wenn das einfache DTOs sind, dann ist das OK. Wenn nicht, müssen Sie dies explizit angeben und einen weiteren Schritt des Übersetzens vom JS-Objekt in Ihre Anwendung durchführen.

---

Shameless Stecker: Ich raynor schrieb genau dieses Verfahren zu automatisieren - von zwischen einem DTO-Typ und einer nützlichen JavaScript-Klasse zu übersetzen.

---

Sie können auch die JSON Serializer auf .net Seite so konfigurieren, dass Feldnamen aus PascalCase zu ‚camelCase` konvertieren.