current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite

After doing a POST to Firebase, I have this returned from Firebase 

{ "name": "-KBfn7iFNIxSuCL9B-g5" }
  1. How do I use Typescript to read the response returned from the POST request? Only the value -KBfn7iFNIxSuCL9B-g5 is need for routing. My existing incomplete code looks like this:
   addHeroGotoHeroDetail() {
     let heroId: string;
     this._firebaseService.postHero()
        .subscribe(response => {
          //do something to make the heroId = -KBfn7iFNIxSuCL9B-g5 
     });
     this._router.navigate(['hero-detail', {id: heroId}]);
   }

The goal is to have a button in the homepage where user can click on it to create a new hero Id in Firebase then redirect it to the newly created hero detail page, where he can do more detail updating.

Also after doing a GET from Firebase, I have this returned from Firebase

{ "-KBfn-cw7wpfxfGqbAs8": { "created": 1456728705596, "hero": "Hero 1", "...": "..."} }

  1. Should I create an interface for the hero JSON returned by Firebase?

  2. If yes for question 2, how should the interface look? 

export interface X {
  id: string; //id defined by Firebase e.g. -KBfn-cw7wpfxfGqbAs8 
  hero: string; //name of the hero e.g. Hero 1 
  created: number; // The time when the hero was created
}
  1. If yes for question 2, how do I use Typescript to parse the JSON object to the interface? Code sample would be very much appreciated.

The goal is to display the hero detail to the user, and allow the user to add more details to the hero such as Date of Birth, Gender and etc... and then update Firebase with these changes.

share|improve this question
up vote 1 down vote accepted

1. See below.

2. Yes, you should create an interface that matches the return type from Firebase.

3. Based on your example JSON, this is how I would structure the return type's interface:

export interface FirebaseResponse {
    [id: string]: {
        created: number;
        hero: string;
    }
}

4. To parse the response from Firebase into a strongly-typed TypeScript object, do something like this:

let firebaseResponse = <FirebaseResponse>JSON.parse(response);

You can then return only the ID, if you wish, by doing something like this:

// note: this is making some assumptions about your response type.
// You may need a more sophisticated way of returning the ID depending
// on the structure of the response - for example, if the object has
// more than one key.
return Object.keys(firebaseResponse)[0];
share|improve this answer
    
Thanks Nathan Friend. This looks promising. I'll try this solution. – choopage Mar 2 at 3:50
    
Also is there a site that I read up on area like your solution? – choopage Mar 2 at 3:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.