My attempt to import a JSON file into my service is resulting in the following error:
Error: Uncaught (in promise): TypeError: this._qs.getBasicInfo(...).subscribe is not a function(…)
The current state of my service file is as follows
@Injectable()
export class QuestionService {
BasicInfoData: Observable<any>;
constructor(private http: Http){}
getBasicInfo() {
this.BasicInfoData = this.http.get('app/questionnaire/questions.json').map(res =>
res.json()).subscribe(data => this.BasicInfoData = data ) as Observable<any>
return this.BasicInfoData;
}
}
and this is how my component is structured
@Component({
moduleId : module.id,
selector : 'questionnaire-page',
templateUrl : './questionnaire.component.html',
providers : [ QuestionService ]
})
export class QuestionnairePage implements OnInit, OnChanges {
BasicInfo: Observable<any>;
constructor(private _qs: QuestionService, private fbuild: FormBuilder) {}
ngOnInit() {
this._qs.getBasicInfo().subscribe( data => this.BasicInfo = data );
console.log(this.BasicInfo);
}
}
Prior to attempting to call the data from my service, I had no issues calling it directly within the ngOnInit() of my component, like so
this.http.get('app/questionnaire/questions.json').subscribe(res => {
this.Questions = res.json()
console.log(this.Questions);
});
I initially tried the same approach and upon further research, incorporated the use of Observable. After reading about RXJS, I discovered that directly subscribing to the data causing issues. The solution suggested utilizing .map() first before subscribing. Despite making these adjustments, I continue encountering errors. I have attempted various solutions but either encounter an error earlier in the code or face the same issue repeatedly. Any insights on why this problem persists?