export const ShoppingList = {
  id: 22,
  username: 'Duff',
  groceries: [
    {
      day: 'Monday',
      purchases: [ { item: 'Beer', price: 10 }, { item: 'Pizza', price: 15 } ]
    },
    {
      day: 'Tuesday',
      purchases: [ { item: 'Wine', price: 10 }, { item: 'Steak', price: 15 } ]
    },
  ]
}

import { Injectable } from '@angular/core';
import { ShoppingList } from './data.js'
//
import { BehaviorSubject } from 'rxjs';
import { pluck } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class DataService {
  shopping_list$ = new BehaviorSubject<any>(ShoppingList);

  user_name$ = this.shopping_list$.pipe(pluck('username');
  id$ = this.shopping_list$.pipe(pluck('id')

  **day$ = new BehaviorSubject<[]>(ShoppingList_groceries[0].day);**

  **purchases$ = new BehaviorSubject<[]>(ShoppingList_groceries[0].purchases);**

  constructor() {}
}

import { DataService } from '../service/data.service.ts';
//
import { from, Observable } from 'rxjs';
import { tap, map, pluck, reduce, switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})

export class ListComponent implements OnInit {

  shopping_list = this.dataService.shopping_list$;
  user_name = this.dataService.user_name$;
  id = this.dataService.id$;
  day = this.dataService.day$

  ***prices = this.dataService.purchases$.pipe(
       pluck('prices'),
       reduce((a:number, c:number) => a + c),
       tap(y => console.log(y))
     );***


  constructor(private dataService: DataService) {}



  ngOnInit() {
    this.shopping_list.subscribe(val => console.log(val))
    this.prices.subscribe(val => console.log(val))
  }

}

<h1>{{ user_name }} {{ id }} </h1>
<p>{{ day }}</p>
<p>{{ prices }}</p>