问题描述
这是我的JSON文件。
{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","link": "https://www.youtube.com/playlist?list=PLPfXrbtn3EgmZitRQf1X1iYwWW_nUF44L","descpription": "Beats that match the ones of your heart","reviews": [
{
"name": "abc","rating": 3.5,"date": ""
}
]
},{
"id": "2","name": "hindi","link": "","descpription": "","date": ""
}
]
},{
"id": "3","name": "Punjabi","link": "https://www.youtube.com/playlist?list=PLPfXrbtn3Egnntch2thUO55YqPQgo4Qh7",{
"id": "4","name": "Mix and Match","link": "https://www.youtube.com/playlist?list=PLPfXrbtn3EglN5LVTETqH3ipRLfXmY6MB","rating": 5,"date": ""
}
]
}
]
} ]
}
我已经在文件名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)))
}
}
这是我的musicdetail.component.ts文件，它将获取所选择的特定音乐的数据。
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);
}
}
在列表的列表上使用'[routerLink] =“ ['/ musicdetails'，mood.id，music.id]”`在music.component.ts中单击时，我同时传递了mood.id和music.id音乐，但我无法做出逻辑来提取特定音乐以显示其所有详细信息。我可以使用getMood（id）服务获取心情ID，但无法在该心情内对音乐进行同样的操作。
解决方法
警告：
您的import React,{ Component } from "react";
import { Cloudinary } from "cloudinary-core";
import "cloudinary-video-player/dist/cld-video-player";
class PlayerCloud extends Component {
componentDidMount() {
// Setting video sources:
var source1 = { publicId: 'elephants',info: { title: 'My main movie',subtitle: 'Something to know about the main movie' } }
var source2 = { publicId: 'cat',info: { title: 'Another great video',subtitle: 'A great subtitle',description: 'An interesting description of this video....' } }
var source3 = { publicId: 'dog',info: { title: 'Another interesting video1',subtitle: 'Subtitle for video3',description: 'An interesting description of this video....' } }
// Specifying the recommendations for source1 as a fixed array of sources:
source1.recommendations = [source2,source3]
const cld = new Cloudinary({ cloud_name: "demo",secure: true });
const videoName = "elephants";
var demoplayer = cld.videoPlayer("some-video",{
publicId: source1.publicId,controls: true,preload: "auto",muted: true,autoplay: true,width: 300,autoShowRecommendations:true
});
}
render() {
return (
<div>
<video
id="some-video"
/>
</div>
);
}
}
export default PlayerCloud;
数据有误，或者您缺少单引号或双引号或第二括号或第三括号。我不知道您错过了什么，它是一个长长的JSON文件。
有一个JSON固定网站（this one）。我粘贴了您的JSON，然后先进行了修复。
现在，我正在使用您的JSON的正确版本（您可以在下面看到它）编写此答案
所以这是答案：
答案很简单-只需使用过滤器方法过滤所需的特定属性
.ts：
JSON要从url参数中获取一些信息：请遵循此
有多种方法可以从网址获取参数
- 看到这个问题：stackoverflow
- 查看此博客：digitalocean