RXJS Karte und FlatMap

Question

Ich bin ein Neuling in Winkel 2 und RXJS Observables, ich mache eine Sache seit dem Morgen, es ist getan, aber ich bin nicht in der Lage zu bekommen, wie es funktioniert.

Hier ist meine test.json Datei unter Assests/api Ordner:

[ { 
    "name" :"James T", 
    "address": { 
      "Street" : { 
       "data": ["Austin","I","J"] 
      }, 
      "District":"XYZ", 
      "test" : { 
       "insideTest":"insideTest1" 
      } 

    } 
}, 
{ 
    "name" :"James T 2", 
    "address": { 
     "Street" : { 
      "data": ["Austin2","I2","J2"] 
      }, 
      "District":"XYZ 2", 
      "test" : { 
       "insideTest":"insideTest2" 
      } 

    } 
}, 
{ 
    "name" :"James T 3", 
    "address": { 
     "Street" : { 
      "data": ["Austin3","I3","J3"] 
      }, 
      "District":"XYZ 3", 
      "test" : { 
       "insideTest":"insideTest3" 
      } 

    } 
} 

] 

Dann habe ich einen Dienst, der diese api aussetzen questionService.ts genannt, Hier ist der Code dafür:

getTheJsonFile(): Observable<any[]>{ 
     return this._http.get('assets/api/test.json') 
     .map(response=>{ 
      return response.json(); 
     }); 
     } 

Und schließlich In meiner Komponente nenne ich diesen Service wie folgt:

import { Component, OnInit } from '@angular/core'; 
import {Campaign} from '../models/campaign'; 
import {Questions} from '../models/questions'; 
import {QuestionService} from '../question/question.service'; 
import { Http , Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import "rxjs/add/operator/mergeMap"; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/toPromise'; 
import 'rxjs/add/operator/share'; 
import 'rxjs/add/operator/switchMap'; 

    @Component({ 
     selector: 'app-campaign', 
     templateUrl: './campaign.component.html', 
     styleUrls: ['../custom.css'], 
     providers: [QuestionService] 
    }) 
    export class CampaignComponent implements OnInit { 


     questionTypes: any; 
     questions: Questions[]; 

    public campaign: Campaign; 
     constructor(public questionService : QuestionService,private _http: Http) { 

     } 


     ngOnInit() { 
     this.getTheJson() 
     .subscribe(data => { 
      console.log("And the data is--->"+data["address"]["Street"]["data"]); 
      data["address"]["Street"]["data"].forEach(test=>console.log("Test Data-->"+test)) 

     }); 
     } 

    getTheJson(): Observable<any>{ 
    return this.questionService.getTheJsonFile() 
     //.map(element => element) 
     //.do(x => console.log("Mydata--->"+JSON.stringify(x))) 
     .flatMap(element => element) 
    } 
    } 

Nun ist meine Frage, wenn ich flatMap(element => element) von getTheJson() Methode entfernen, gibt es null/undefined, warum das passiert? Und noch einmal Wenn ich map() anstelle von flatMap() anrufe, dann gibt es auch das Undefinierte Ergebnis zurück.

Während auf der anderen Seite habe ich die andere Methode, die genau gleich funktioniert, aber dafür muss ich FlatMap() nicht aufrufen. Bitte helfen Sie!

Answer 1

Ihr decodierter JSON ist eine Anordnung von Objekten. flatMap wird im Grunde ist es in einer beobachtbaren verwandeln, die zu einem Zeitpunkt ein Objekt aussendet:

object...object...object... 

Nach dem Entfernen der flatMap, was man von abonnieren bekommen nur einen Wert zu:

[object, object, object] 

So müssten Sie entsprechend anpassen, da dieser Code nicht:

subscribe(data => { 
      // data["address"] is undefined because you're getting an array of objects 
      data["address"]["Street"]["data"].forEach(test=>console.log("Test Data-->"+test)) 

    }) 

So flapMap nach dem Entfernen, könnten Sie so etwas tun:

subscribe(data => { 
    data.forEach(person => { 
     console.log(`name: ${person.name}`,`street: ${person.address.street.data}`); 
    }); 
})