2017-05-12 10 views
0

配列を含む正しい構造体で文字列が生成されます。 http://jsonviewer.stack.hu/配列は文字列化されていますが、TypeScript/javascriptでは使用できません

などのサイトでJSONを操作できますが、配列にアクセスしようとすると配列自体がnullになります。

まずインターフェース:

export interface IPlayerJSON { 
    idPlayer: number, 
    name: string; 
    email: string, 
    arrayAvatar: Array<IAvatarJSON>, 
}; 

export interface IAvatarJSON { 
    idAvatar: number, 
    nickName: string, 
    original: boolean, 
    signature: string, 
}; 

、次いでオーバーライドされたメソッド

public toJSON(): IPlayerJSON { 
     let json: IPlayerJSON; 
     json = {idPlayer: this.idPlayer, email: this.email, name: this.name, avatarOriginal: this.avatarOriginal.toJSON(), 
       arrayAvatar: []} 
     for (let r of this.arrayAvatar) { 
      json.arrayAvatar.push(r.toJSON()); 
     }; 
     return json; 
    }; 

アバターもtoJSONを変更した

は、ここに私の場合です。私が言ったように、JSON.stringifyは、正しいナビゲーション可能なJSONを生成します。

私は再水和してみてください:

public static playerRehydrate(json: IPlayerJSON): Player { 
     let player : Player = new Player(null, null, null); 
     console.log('JSON ', json); // perfect, with array 
     player.setEmail(json.email); 
     player.setPlayerID(json.idPlayer); 
     player.setName(json.name); 
     console.log('Array Avatar ', json.arrayAvatar); 
     for (let r of json.arrayAvatar) { // throw error, no lenght of undefined 
      player.addAvatar(RehydrateService.avatarRehydrate(r)); 
     }; 
     return player; 
    }; 

json.arrayAvatarがnullであり、私はそれを介して相互作用することはできません。

ヒント?ありがとう、

+0

出力のjsonを見てみると、 'Array Avatar'のログ行から何を得ることができるでしょうか。 – Mutahhir

+0

'IPlayerJSON'は' avatarOriginal'を持っていませんが、 'toJSON'に追加しています – Aaron

答えて

0

私はプロセスのステップを逃した。

正しいです:

let player: Player; 
let txt: string = JSON.stringify(player); // here all the toJSON() chain will be called 
let playerJSON: IPlayerJSON = JSON.parse(txt); // <-- here is the missing code 
player = playerRehydrate(playerJSON); // now player has state and behaviour 
+0

元の質問に' JSON.stringify'を使って何も言及していません。 – Aaron

0

あなたがworks on its own in the playground投稿コードは、ので、あなたの問題は、どこか他のいくつかの他のコードでなければなりません。 (ソースコード付きの遊び場のリンクが長すぎるため、コメントとして投稿することができませんでした。)

interface IPlayerJSON { 
    idPlayer: number, 
    name: string; 
    email: string, 
    arrayAvatar: Array<IAvatarJSON>, 
} 

interface IAvatarJSON { 
    idAvatar: number, 
    nickName: string, 
    original: boolean, 
    signature: string, 
} 

class Avatar { 
    constructor(
    public idAvatar: number, 
    public nickName: string, 
    public original: boolean, 
    public signature: string 
) { 

    } 
    public toJSON(): IAvatarJSON { 
    const { idAvatar, nickName, original, signature } = this; 
    return { idAvatar, nickName, original, signature }; 
    } 
} 

class Player { 
    constructor(
    public idPlayer: number, 
    public email: string, 
    public name: string, 
    public avatarOriginal: Avatar = null, 
    public arrayAvatar: Avatar[] = [] 
) { 

    } 
    public setEmail(email: string) { 
    this.email = email; 
    } 
    public setPlayerID(idPlayer: number) { 
    this.idPlayer = idPlayer; 
    } 
    public setName(name: string) { 
    this.name = name; 
    } 
    public addAvatar(avatar: Avatar) { 
    this.arrayAvatar.push(avatar); 
    } 
    public toJSON(): IPlayerJSON { 
    let json: IPlayerJSON; 
    json = { 
     idPlayer: this.idPlayer, email: this.email, name: this.name, 
     // avatarOriginal: this.avatarOriginal.toJSON(), 
     arrayAvatar: [] 
    } 
    for (let r of this.arrayAvatar) { 
     json.arrayAvatar.push(r.toJSON()); 
    }; 
    return json; 
    } 
} 

class RehydrateService { 
    public static playerRehydrate(json: IPlayerJSON): Player { 
     let player: Player = new Player(null, null, null); 
     console.log('JSON in rehydrate', json); // perfect, with array 
     player.setEmail(json.email); 
     player.setPlayerID(json.idPlayer); 
     player.setName(json.name); 
     console.log('Array Avatar in rehydrate', json.arrayAvatar); 
     for (let r of json.arrayAvatar) { // throw error, no lenght of undefined 
      player.addAvatar(RehydrateService.avatarRehydrate(r)); 
     }; 
     return player; 
    }; 
    public static avatarRehydrate(json: IAvatarJSON): Avatar { 
    return new Avatar(json.idAvatar, json.nickName, json.original, json.signature); 
    } 
} 

const player: Player = new Player(1, "@", "a", 
    new Avatar(2, "b", true, "bb"), 
    [ 
    new Avatar(3, "c", false, "cc"), 
    new Avatar(4, "d", false, "dd"), 
    new Avatar(5, "e", false, "ee") 
    ] 
); 

console.log("player source:", player) 
console.log("player to JSON result:", player.toJSON()) 
console.log("rehydrate player JSON result:", RehydrateService.playerRehydrate(player.toJSON())) 

出力の最後のログ・ステートメントからtoJSONと再水和は、アバターの配列が含ま後:

enter image description here

アンこれをあなたはアバターの配列を反復処理することができますを示しています。

RehydrateService.playerRehydrate(player.toJSON()).arrayAvatar.forEach(avatar => console.log(avatar)) 

enter image description here

+0

はい、配列をナビゲートするとエラーが発生します。したがって、再水和メソッドの結果にJSON.parseを追加する必要があります。 – JLCDev

+0

少なくとも、投稿されたコードではそうではありません。元の質問には表示されていないJSON.stringifyを追加したところに答えを追加しました。 – Aaron

関連する問題