Angular 2 return filtered data from services

Question

I am kinda new in angular js, I wanted to return a filtered data from services to a component.

This is my json look likes

{
"emails": [
    {
        "list": [
        {
            "id": 1,
            "subject": "Test Subject 1"
        }, 
        {
            "id": 2,
            "subject": "Test Subject 2"   
        }]
    }, 
    {
        "list": [
        {
            "id": 3,
            "subject": "Test Subject 3"
        }, 
        {
            "id": 4,
            "subject": "Test Subject 4"
        }]
    }
]

}

This is my service

export class EmailService {

emails: any

constructor(private http: Http) {}


getEmailItem(id: number | string) {
    return this.http
    .get('../../../assets/js/data/email-list.json')
    .map(data => {data.json(); return data.json();});
}

}

I wish to return data as below, how should I do?

{
    "id": 1,
    "subject": "Test Subject 1"
}, 

Any guide would be appreciated, Thank you

Answer 1

you can flatout your json and then apply filter,

getEmailItem(id: number | string) {
    let flatData = [];
    return this.http
    .get('../../../assets/js/data/email-list.json')
    .map(data => {data.json(); return data.json();})
    .map(this.flatEmailList)
    .filter(email => email.id == id);
}

flatEmailList(data){
  let flatData = [];
  data.emails.map(emails => flatData = flatData.concat(emails.list));
  return  flatData;
}