Searching Wikipedia

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Jafar Husain: So let's make it a little bit shorter so we don't see that whole event there and go key code.
>> Jafar Husain: Yeah, once again. So now we've got a collection of all the key presses, from now until eternity. It's never gonna end until we dispose of the subscription.

[00:00:27]
What we wanna do now, in order to be able to go get search results from Wikipedia. We need to be able to make a network request. So that's gonna be a little bit of a challenge, cuz in JS Bin, from within JS Bin anyway, you can't make an XHR request, because it would be cross domain.

[00:00:41]
But who here has heard of JSONP? Anybody heard of JSONP? Right, so that's a neat little trick we can use to get around the cross domain restriction. And thankfully, Wikipedia supports JSONP APIs. So let's try and pull in a jQuery API to do that. So let's see how we would do this with jQuery.

[00:01:01]
So I'm gonna pull in a Wikipedia search. And let's take a close look at this function. There's not much going on here. You take a term, right, and then we embed that term into a url. And notice I've got that little on the very end, I've got url parameter, just callback equals question mark.

[00:01:20]
What jQuery does, it's gonna use that, it's gonna enter enter something in there, and then create a callback under the hood. That's how the JSONP machinery works. When you download a JSONP request, it's actually a script, that invokes a callback. And so, what's gonna happen, is jQuery is going to create a local function, give it a name, and then take that same name, and give it the callback URL, and then Wikipedia gives us the request, it's gonna invoke the function that we just defined.

[00:01:45]
So if you don't understand all the JSONP stuff, don't worry too much about it. It's not really core to understanding this. What is core to understanding this, is that when we execute this function, all you need to know is that we've gone to jQuery and we're printing the result that we get back from jQuery.

[00:01:58]
So I'm gonna run search Wikipedia, and let's look up Terminator.
>> Jafar Husain: And now I'm gonna clear the console.
>> Jafar Husain: And run, and look what we got. We got this object back from Wikipedia. I'm gonna close the other tab, just for a momen,t so we can take a close look at it.

[00:02:24]
So what does it look like? Well, it looks like it's got this object, it looks like possibly an array, with zeros, that seems like the search we made, and here seems like an array of possible searches. So that array of possible searches is what we're gonna use for auto complete box.

[00:02:43]
Does that make sense? So as we type things in we're gonna keep hitting Wikipedia and bring that array of possible searches back. But, we don't wanna work with this weird callback API. We wanna convert this API into returning unobservable, cuz that's gonna give us the powerful combination operators to squeeze them all together.

[00:02:59]
So now that we know what this thing looks like. Hopefully I can get JS bin to show me the.
>> Jafar Husain: JS bin gets a little bit finicky every now and then, there's a little toolbar up here. Bear with me. All right guys we're back. [LAUGH] Let's get started with Plunker.

[00:03:23]
Plunker to the rescue. So I've got J Query and I've got RX. So now that I've got my text box, remember we're gonna create the key presses collection and that's just a matter of going, well for some actually going to bring in the observable sort of keep typing RX observable.

[00:03:40]
This is implicitly done in your exercises, by the way, when you go, when you've been using observable, is the rx, we're implicitly writing that line of code so you can use observable without going rx.observable. So, let's go Observable.fromEvent, textbox, keypress.
>> Jafar Husain: Now, if I go keypresses.forEach.
>> Jafar Husain: By the way, anybody know how we can use ES6 and Plunker?

[00:04:13]
If you do, just shout it out on the chat room and that would be better.
>> Jafar Husain: So now if we've done this correctly, and we can find the run button. Anybody know what happened to that run button? Stop, okay, here we go, run.
>> Jafar Husain: Great, so did everybody see that?

[00:04:42]
We've converted our keypresses on the text box to an observable stream. So we've got one of our collections. We've got key presses, and now we need the other, we need a function that will give us a collection of one. That will make a network request for us from Wikipedia to get those search results we saw earlier.

[00:04:59]
So I'm going to comment this out. So let's go, so I've got jQuery, so I'm gonna paste in a piece of code that I had earlier on JS doc which, somewhere, here we go. This piece of code which we'll use jQuery to go out and get a network request.

[00:05:29]
>> Jafar Husain: From Wikipedia. So I'm gonna go, see there seems to be some sort of collaboration going on here. I notice a people are selecting stuff. Is that expected? I think everybody out there can actually edit this code. So if you'll tread lightly, that would be ideal.
>> Speaker 2: [INAUDIBLE] didn't you?

[00:05:51]
>> Jafar Husain: Yeah I did.
>> Speaker 2: [INAUDIBLE].
>> Jafar Husain: Might be like collaboration mode. It's all right.
>> Speaker 2: I think maybe just the highlighter's messed up. Maybe it's just the highlighter?
>> Jafar Husain: It seemed to be actually moving. So, there you go, more. I don't know if somebody out there is selecting code but-

[00:06:08]
>> Speaker 2: Yeah, I just [INAUDIBLE]. [LAUGH] I think maybe people can highlight, but I don't think they can edit.
>> Jafar Husain: Okay, interesting.
>> Speaker 2: [INAUDIBLE] [LAUGH]
>> Jafar Husain: All right. Okay, so you see we explained JSON P already. I'm gonna call searchWikipedia and then I'm gonna pass in Terminator. We get a keyboard event.

[00:06:28]
That's fine, but, we haven't gotten our request from the server yet. I hope that pans out.
>> Speaker 2: [INAUDIBLE] it's weird to see the before we.
>> Jafar Husain: Let's try and run through debugger, will that work? Come on plucker. I may just have, nope. I see, we're good. There we go.

[00:07:36]
De bugger should make that network request and we get, not so obvious, but we get an object back from the server. And that all object looks like, I believe, if you remember, we had an array where the first item was actually the search we made, and the second item I believe was an array of the results.

[00:07:55]
So, there we go there's our array of search results for Terminator.