我在服务器中部署了json，如下所示：
{
"data": [
{
"id": 1,
"name": "Angular Connect",
"date": "2036-09-25T23:00:00.000Z",
"time": "10:00 am",
"price": 599.99,
"imageUrl": "/assets/images/angularconnect-shield.png",
"location": {
"address": "1057 DT",
"city": "London",
"country": "England"
},
"sessions": [
{
"id": 1,
"name": "Using Angular 4 Pipes",
"presenter": "Peter Bacon Darwin",
"duration": 1,
"level": "Intermediate",
"abstract": "Learn all about the new pipes in Angular 4, both \n how to write them, and how to get the new AI CLI to write \n them for you. Given by the famous PBD, president of Angular \n University (formerly Oxford University)",
"voters": [
"bradgreen",
"igorminar",
"martinfowler"
]
},
{
"id": 2,
"name": "Getting the most out of your dev team",
"presenter": "Jeff Cross",
"duration": 1,
"level": "Intermediate",
"abstract": "We all know that our dev teams work hard, but with \n the right management they can be even more productive, without \n overworking them. In this session I'll show you how to get the \n best results from the talent you already have on staff.",
"voters": [
"johnpapa",
"bradgreen",
"igorminar",
"martinfowler"
]
},
{
"id": 3,
"name": "Angular 4 Performance Metrics",
"presenter": "Rob Wormald",
"duration": 2,
"level": "Advanced",
"abstract": "Angular 4 Performance is hot. In this session, we'll see \n how Angular gets such great performance by preloading data on \n your users devices before they even hit your site using the \n new predictive algorithms and thought reading software \n built into Angular 4.",
"voters": []
},
{
"id": 4,
"name": "Angular 5 Look Ahead",
"presenter": "Brad Green",
"duration": 2,
"level": "Advanced",
"abstract": "Even though Angular 5 is still 6 years away, we all want \n to know all about it so that we can spend endless hours in meetings \n debating if we should use Angular 4 or not. This talk will look at \n Angular 6 even though no code has yet been written for it. We'll \n look at what it might do, and how to convince your manager to \n hold off on any new apps until it's released",
"voters": []
},
{
"id": 5,
"name": "Basics of Angular 4",
"presenter": "John Papa",
"duration": 2,
"level": "Beginner",
"abstract": "It's time to learn the basics of Angular 4. This talk \n will give you everything you need to know about Angular 4 to \n get started with it today and be building UI's for your self \n driving cars and butler-bots in no time.",
"voters": [
"bradgreen",
"igorminar"
]
}
]
},
{
"id": 2,
"name": "ng-nl",
"date": "2037-04-14T23:00:00.000Z",
"time": "9:00 am",
"price": 950,
"imageUrl": "/assets/images/ng-nl.png",
"onlineUrl": "http://ng-nl.org/",
"sessions": [
{
"id": 1,
"name": "Testing Angular 4 Workshop",
"presenter": "Pascal Precht & Christoph Bergdorf",
"duration": 4,
"level": "Beginner",
"abstract": "In this 6 hour workshop you will learn not only how to test Angular 4, \n you will also learn how to make the most of your team's efforts. Other topics\n will be convincing your manager that testing is a good idea, and using the new\n protractor tool for end to end testing.",
"voters": [
"bradgreen",
"igorminar"
]
},
{
"id": 2,
"name": "Angular 4 and Firebase",
"presenter": "David East",
"duration": 3,
"level": "Intermediate",
"abstract": "In this workshop, David East will show you how to use Angular with the new\n ultra-real-time 5D Firebase back end, hosting platform, and wine recommendation engine.",
"voters": [
"bradgreen",
"igorminar",
"johnpapa"
]
},
{
"id": 3,
"name": "Reading the Angular 4 Source",
"presenter": "Patrick Stapleton",
"duration": 2,
"level": "Intermediate",
"abstract": "Angular 4's source code may be over 25 million lines of code, but it's really \n a lot easier to read and understand then you may think. Patrick Stapleton will talk\n about his secretes for keeping up with the changes, and navigating around the code.",
"voters": [
"martinfowler"
]
},
{
"id": 4,
"name": "Hail to the Lukas",
"presenter": "Lukas Ruebbelke",
"duration": 1,
"level": "Beginner",
"abstract": "In this session, Lukas will present the \n secret to being awesome, and how he became the President \n of the United States through his amazing programming skills, \n showing how you too can be success with just attitude.",
"voters": [
"bradgreen"
]
}
]
},
{
"id": 3,
"name": "ng-conf 2037",
"date": "2037-05-03T23:00:00.000Z",
"time": "9:00 am",
"price": 759,
"imageUrl": "/assets/images/ng-conf.png",
"location": {
"address": "The Palatial America Hotel",
"city": "Salt Lake City",
"country": "USA"
},
"sessions": [
{
"id": 1,
"name": "How Elm Powers Angular 4",
"presenter": "Murphy Randle",
"duration": 2,
"level": "Intermediate",
"abstract": "We all know that Angular is written in Elm, but did you\n know how the source code is really written? In this exciting look\n into the internals of Angular 4, we'll see exactly how Elm powers\n the framework, and what you can do to take advantage of this knowledge.",
"voters": [
"bradgreen",
"martinfowler",
"igorminar"
]
},
{
"id": 2,
"name": "Angular and React together",
"presenter": "Jamison Dance",
"duration": 2,
"level": "Intermediate",
"abstract": "React v449.6 has just been released. Let's see how to use \n this new version with Angular to create even more impressive applications.",
"voters": [
"bradgreen",
"martinfowler"
]
},
{
"id": 3,
"name": "Redux Woes",
"presenter": "Rob Wormald",
"duration": 1,
"level": "Intermediate",
"abstract": "Everyone is using Redux for everything from Angular to React to \n Excel macros, but you're still having trouble grasping it? We'll take a look\n at how farmers use Redux when harvesting grain as a great introduction to \n this game changing technology.",
"voters": [
"bradgreen",
"martinfowler",
"johnpapa"
]
},
{
"id": 4,
"name": "ng-wat again!!",
"presenter": "Shai Reznik",
"duration": 1,
"level": "Beginner",
"abstract": "Let's take a look at some of the stranger pieces of Angular 4,\n including neural net nets, Android in Androids, and using pipes with actual pipes.",
"voters": [
"bradgreen",
"martinfowler",
"igorminar",
"johnpapa"
]
},
{
"id": 5,
"name": "Dressed for Success",
"presenter": "Ward Bell",
"duration": 2,
"level": "Beginner",
"abstract": "Being a developer in 2037 is about more than just writing bug-free code. \n You also have to look the part. In this amazing expose, Ward will talk you through\n how to pick out the right clothes to make your coworkers and boss not only\n respect you, but also want to be your buddy.",
"voters": [
"bradgreen",
"martinfowler"
]
},
{
"id": 6,
"name": "These aren't the directives you're looking for",
"presenter": "John Papa",
"duration": 2,
"level": "Intermediate",
"abstract": "Coinciding with the release of Star Wars Episode 18, this talk will show how\n to use directives in your Angular 4 development while drawing lessons from the new movie,\n featuring all your favorite characters like Han Solo's ghost and Darth Jar Jar.",
"voters": [
"bradgreen",
"martinfowler"
]
}
]
},
{
"id": 4,
"name": "UN Angular Summit",
"date": "2037-06-09T23:00:00.000Z",
"time": "8:00 am",
"price": 800,
"imageUrl": "/assets/images/basic-shield.png",
"location": {
"address": "The UN Angular Center",
"city": "New York",
"country": "USA"
},
"sessions": [
{
"id": 1,
"name": "Diversity in Tech",
"presenter": "Sir Dave Smith",
"duration": 2,
"level": "Beginner",
"abstract": "Yes, we all work with cyborgs and androids and Martians, but \n we probably don't realize that sometimes our internal biases can make it difficult for\n these well-designed coworkers to really feel at home coding alongside us. This talk will\n look at things we can do to recognize our biases and counteract them.",
"voters": [
"bradgreen",
"igorminar"
]
},
{
"id": 2,
"name": "World Peace and Angular",
"presenter": "US Secretary of State Zach Galifianakis",
"duration": 2,
"level": "Beginner",
"abstract": "Angular has been used in most of the major peace brokering that has\n happened in the last decade, but there is still much we can do to remove all\n war from the world, and Angular will be a key part of that effort.",
"voters": [
"bradgreen",
"igorminar",
"johnpapa"
]
},
{
"id": 3,
"name": "Using Angular with Androids",
"presenter": "Dan Wahlin",
"duration": 3,
"level": "Advanced",
"abstract": "Androids may do everything for us now, allowing us to spend all day playing \n the latest Destiny DLC, but we can still improve the massages they give and the handmade\n brie they make using Angular 4. This session will show you how.",
"voters": [
"igorminar",
"johnpapa"
]
}
]
},
{
"id": 5,
"name": "ng-vegas",
"date": "2037-02-10T00:00:00.000Z",
"time": "9:00 am",
"price": 400,
"imageUrl": "/assets/images/ng-vegas.png",
"location": {
"address": "The Excalibur",
"city": "Las Vegas",
"country": "USA"
},
"sessions": [
{
"id": 1,
"name": "Gambling with Angular",
"presenter": "John Papa",
"duration": 1,
"level": "Intermediate",
"abstract": "No, this talk isn't about slot machines. We all know that \n Angular is used in most waiter-bots and coke vending machines, but\n did you know that was also used to write the core engine in the majority\n of voting machines? This talk will look at how all presidential elections\n are now determined by Angular code.",
"voters": [
"bradgreen",
"igorminar"
]
},
{
"id": 2,
"name": "Angular 4 in 60ish Minutes",
"presenter": "Dan Wahlin",
"duration": 2,
"level": "Beginner",
"abstract": "Get the skinny on Angular 4 for anyone new to this great new technology.\n Dan Wahlin will show you how you can get started with Angular in 60ish minutes, \n guaranteed!",
"voters": [
"bradgreen",
"igorminar",
"johnpapa"
]
}
]
},
{
"name": "ng Spectacular",
"date": "12/10/2017",
"time": "10:00 am",
"price": 1200,
"location": {
"address": "102, rue ibn tachfine",
"city": "Casablanca",
"country": "Morocco"
},
"onlineUrl": null,
"imageUrl": "https://i.imgflip.com/yhzjy.jpg",
"id": 6
}
]
}
此外，我创建了两个模型接口来表示上述json：
export interface IEvent{
id:number
name:string
date:Date
time:string
price:number
imageUrl:string
location?:{
address:string
city:string
country:string
},
onlineUrl?:string,
sessions:ISession[]
}
export interface ISession{
id:number
name:string
presenter:string
duration:number
level:string
abstract:string
voters:string[]
}
（ISession代表其键等于“ sessions”的json，请注意，最后一个json嵌套在其模型为IEvent的父json中。）
我想通过关键字进行搜索会话：然后，我通过搜索与所需会话相对应的事件来查找此曲目，例如，当我键入以下网址时： http://localhost:3000/data?q=pipe 它返回包含关键字“ pipe”的所有事件。另一方面，我只希望会话而不是所有与关键字匹配的事件。例如，我希望返回的json将如下所示：
{
"id": 1,
"name": "Using Angular 4 Pipes",
"presenter": "Peter Bacon Darwin",
"duration": 1,
"level": "Intermediate",
"abstract": "Learn all about the new pipes in Angular 4, both \n how to write them, and how to get the new AI CLI to write \n them for you. Given by the famous PBD, president of Angular \n University (formerly Oxford University)",
"voters": [
"bradgreen",
"igorminar",
"martinfowler"
]
},
{
"id": 4,
"name": "ng-wat again!!",
"presenter": "Shai Reznik",
"duration": 1,
"level": "Beginner",
"abstract": "Let's take a look at some of the stranger pieces of Angular 4,\n including neural net nets, Android in Androids, and using pipes with actual pipes.",
"voters": [
"bradgreen",
"martinfowler",
"igorminar",
"johnpapa"
]
}
最后，我想通过使用rxjs来消耗URL的结果，如下所示：
searchSession(sessionKeyWord: string):Observable<ISession[]> {
return this.http.get(this.url + '?q=' + sessionKeyWord).pipe(map(response => {
return response.json();
}), catchError((e: Response) => {return e.statusText}))
}
但是结果是事件而不是会话。因此，我只希望与上述返回的json之类的关键字匹配的会话。
请给予任何帮助，我们将不胜感激。预先感谢您的答复。
答案 0 :(得分：0)
对 rxjs 的运算符进行了深入研究之后，我发现了这种解决方案，它对我很有效： 在下面查看此方法： 1）首先，我使用 http angular 模块的get从 API 请求json响应。
2）我将json响应映射到IEvent模型，并创建ISession Array类型的 searchedSessions 变量。在将结果的会话数组连接到最后一个变量中的每个变量之后。
3）我筛选出包含带有indexOf（keyword）关键字的会话。
4）最后，我返回了已过滤会话的可观察值。
searchSession(sessionKeyWord: string):Observable<ISession[]> {
return this.http.get(this.url + '?q=' + sessionKeyWord).pipe(map(response => {
return response.json();
}),map((data:IEvent[])=>{
var searchedSessions:ISession[]=[];
data.forEach((event:IEvent)=>{
searchedSessions=searchedSessions.concat(event.sessions);
console.log(searchedSessions)
});
var filteredSessions:ISession[]=[]
filteredSessions=searchedSessions.filter((session:ISession)=>{
return session.abstract.toLocaleLowerCase().indexOf(sessionKeyWord.toLocaleLowerCase())>-1})
console.log(filteredSessions)
return filteredSessions;
}))
}
如果您遇到同样的情况，希望我的回答对您有所帮助。