Unable to access data from JSON file in Angular application using Angular services

Question

This is my JSON file.

{mood: [ {

    "id":"1",
    "text": "Annoyed",
    "cols": 1, 
    "rows": 2, 
    "color": "lightgreen",
    "route":"/angry",

    "musics": [
      {
          "id": "0",
          "name": "English- Heaven's Peace",
          "image": "images/music.png",
          "link": "https://www.youtube.com/playlist?list=PLPfXrbtn3EgleopO8DiEdsNKgqYZZSEKF",
          "descpription": "Tunes that soothe your pained soul",
          "reviews": [
              {                   
                   "name": "abc",
                   "rating": 4,
                   "review": "energetic",
                   "date": ""
              }
          ]
      },
      {
           "id": "1",
           "name": "English- Hell's Fire",
           "image": "images/music.png",
           "link": "https://www.youtube.com/playlist?list=PLPfXrbtn3EgmZitRQf1X1iYwWW_nUF44L",
           "descpription": "Beats that match the ones of your heart",
           "reviews": [
               {                   
                    "name": "abc",
                    "rating": 3.5,
                    "review": "energetic",
                    "date": ""
               }
           ]
      },
      {
           "id": "2",
           "name": "Hindi",
           "image": "images/music.png",
           "link": "",
           "descpription": "",
           "reviews": [
               {                   
                    "name": "abc",
                    "rating": 4,
                    "review": "energetic",
                    "date": ""
               }            
           ]     
      },
      {
           "id": "3",
           "name": "Punjabi",
           "image": "images/music.png",
           "link": "https://www.youtube.com/playlist?list=PLPfXrbtn3Egnntch2thUO55YqPQgo4Qh7",
           "descpription": "",
           "reviews": [
               {                   
                    "name": "abc",
                    "rating": 4,
                    "review": "energetic",
                    "date": ""
               }            
           ]     
      },
      {
           "id": "4",
           "name": "Mix and Match",
           "image": "images/music.png",
           "link": "https://www.youtube.com/playlist?list=PLPfXrbtn3EglN5LVTETqH3ipRLfXmY6MB",
           "descpription": "",
           "reviews": [
               {                   
                    "name": "abc",
                    "rating": 5,
                    "review": "energetic",
                    "date": ""
               }            
           ]     
      }
   ]
}  ]
}`

I have created angular services in a file name mood.services.ts

import { Injectable } from '@angular/core';
import { Mood } from '../shared/mood';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';
import { map, catchError } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';
import { ProcessHTTPMsgService } from './process-httpmsg.service';
@Injectable({
providedIn: 'root'
})
export class MoodService {

constructor(private http: HttpClient,
private processHTTPMsgService: ProcessHTTPMsgService) { }

getMoods(): Observable<Mood[]> {
  return this.http.get<Mood[]>(baseURL + 'moods')
  .pipe(catchError(this.processHTTPMsgService.handleError));
}

getMood(id: number): Observable<Mood> {
  return this.http.get<Mood>(baseURL+'moods/'+id)
  .pipe(catchError(this.processHTTPMsgService.handleError));
}

getMoodIds(): Observable<number[] | any> {
  return this.getMoods().pipe(map(moods => moods.map(mood => mood.id)))
  .pipe(catchError(error => error));
}

getMusicIds(): Observable<number[] | any> {
  return this.getMoods().pipe(map(musics => musics.map(music => music.id)))
}
}

And this is my musicdetail.component.ts file which will fetch the data of the particular music that is chosen.

import { Component, OnInit, Inject } from '@angular/core';
import { Mood } from '../shared/mood';
import { Music } from '../shared/music';
import { Review } from '../shared/review';
import { MoodService } from '../services/mood.service';
import { Params, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { switchMap } from 'rxjs/operators';

@Component({
selector: 'app-musicdetail',
templateUrl: './musicdetail.component.html',
styleUrls: ['./musicdetail.component.scss']
})
export class MusicdetailComponent implements OnInit {

mood : Mood;
music: Music;
musicIds: string;
errMess: string;
prev : string;
next : string;
review: Review;

constructor(private moodservice: MoodService,
private route: ActivatedRoute,
private location: Location,
@Inject('BaseURL') private BaseURL) { }

ngOnInit(): void {
this.route.params.pipe(switchMap((params: Params) => {return this.moodservice.getMood(params['id']); 
}))
.subscribe(mood => {this.mood = mood;}, errmess => this.errMess = <any>errmess);
}

}

I have passed both mood.id and music.id when clicked in music.component.ts using '[routerLink]="['/musicdetails', mood.id, music.id]"`, on the list of music but I am unable to make logic to fetch particular music to display all its details. I am able to get mood-id using getMood(id) service but unable to do the same for music inside that mood.

MoxxiManagarm · Accepted Answer · 2020-09-08 07:38:18Z

1

Do you mean this?

getMusic(moodId: number, musicId: number): Observable<Music> {
  return this.getMood(moodId).pipe(
    map(mood => mood.musics.find(music => music.id == musicId)),
    // please note: not === since id is a string in your json, but a number param
  );
}

answered Sep 8, 2020 at 7:38

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aayush Jain Over a year ago

Thanks @MoxxiManagarm , It looks like this is what I need. I try and contact you later. But how can I use it in my musicdetails.component.ts file? As musicid is also in params. For example: localhost:3000/dishdetails/1/2 where '1' is moodID and 2 is musicID. The logic of getting moodID from params, I have already implemented.

MoxxiManagarm Over a year ago

sure, just get both params from route and pass it to the service

Aayush Jain Over a year ago

Okay, I'll try to make it work and get back to you if I need further assistance. Thanks a lot. Cheers.

Aayush Jain Over a year ago

I used this code in musicdetail.component.ts:

this.route.params.pipe(switchMap((params: Params) => {return this.moodservice.getMusic(params['id'], params['id']); }))     .subscribe(music => {this.music = music;},  errmess => this.errMess = <any>errmess);

The service given by you worked but every time I select music it changes the moodID rather than musicID. I mean moodID is changing when I select a music but musicID is fixed. I guess the params are not fetched correctly from above code.

Collectives™ on Stack Overflow

Unable to access data from JSON file in Angular application using Angular services

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related