I'm encountering a roadblock with this issue, hopefully I can find some assistance here.
Essentially, I am attempting to make a simple get http request in http.service and then pass the json object to the filter.service. From there, I aim to transfer the output array to the component. However, I keep running into an empty error.
http.service
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';
@Injectable()
export class HttpService {
constructor(private http : Http) { }
getData() {
return this.http.get('https://angular2-49133.firebaseio.com/catalog.json')
.map((response : Response) => response.json());
}
}
filtering.service
import { Injectable } from '@angular/core';
import { HttpService } from './http.service';
@Injectable()
export class FilterService {
public dataArr = [];
constructor(private httpService : HttpService) { }
setData() {
this.httpService.getData()
.subscribe((data) =>
{
const resultArr = [];
for(let key in data) {
resultArr.push(data[key]);
}
this.dataArr = resultArr; //console.log(resultArr) works in component.
}
)
}
getData() {
return this.dataArr;
}
}
component.ts
import { Component, OnInit } from '@angular/core';
import { FilterService } from '../../filter.service';
@Component({
selector: 'ubi-item-section',
templateUrl: './item-section.component.html',
styleUrls: ['./item-section.component.css']
})
export class ItemSectionComponent implements OnInit{
items = [];
filter;
constructor(private filterService : FilterService) { }
ngOnInit() {
this.filterService.setData();
this.items = this.filterService.getData()
}
}