Yan Cui
I help clients go faster for less using serverless technologies.
Matthew Podwysocki posted a couple of very good articles on RxJS on codebetter.com and amongst them was a simple demo to do a look up on wikipedia using their open API:
Introduction to the Reactive Extensions for JavaScript – Wikipedia Lookup
Unfortunately, there wasn’t a live demo you can play around with and see it work, and since the article was posted things might have changed and doing cross-domain HTTP requests are no longer a straightforward affair (at least not when it comes to Chrome and Firefox). If you had tried to piece together all the bits of code snippets from the article you might find that it only works in IE but not in Chrome or Firefox.
So I decided to put together a working demo, and with that, let’s start with the HTML from the original example:
1: <body>
2: <div id="wrapper">
3: <input id="search-input" size="100" type="text" placeholder="Enter Search Phrase" />
4: <ul id="results" />
5: <p id="error" />
6: </div>
7: </body>
And the Javascript which had been slightly modified from those shown in the article:
1: <script type="text/javascript">
2: function searchWiki(term) {
3: // note the callback=? clause at the end, which is required to make
4: // cross-domain request possible in chrome and firefox
5: var url = "http://en.wikipedia.org/w/api.php?action=opensearch&search=" +
6: term + "&format=json&callback=?";
7:
8: // note that I'm using getJSONAsObservable instead of XMLHttpRequest
9: return $.getJSONAsObservable(url)
10: .Select(function (result) {
11: if (result.data && result.data.length == 2) {
12: return result.data[1];
13: }
14: else {
15: return [];
16: }
17: });
18: }
19:
20: $(function () {
21: var searcher = $("#search-input");
22:
23: var searchTerms =
24: searcher.toObservable("keyup") // hook up the keyup event on the search box
25: .Throttle(250) // ignore values entered within 250ms of each other
26: .Select(function () { // return what's in the search box
27: return searcher.val();
28: });
29:
30: var searchResults = searchTerms.Select(function (term) { return searchWiki(term); }).Switch();
31:
32: searchResults.Subscribe(function (data) {
33: $("#results").empty();
34: $.each(data, function (_, value) {
35: $("#results").append("<li>" + value + "</li>");
36: })
37: }, function (errr) {
38: $("#error").html(error);
39: });
40: });
41: </script>
Key things to note here:
- line 6, at the end of the url I added &callback=? which is the standard way to specify a JSONP callback with jQuery‘s getJSON function.
- line 9, I used getJSONAsObservable, which is the same as getJSON but returns the values as an observable sequence
Demo
Whenever you’re ready, here are 4 ways I can help you:
- If you want a one-stop shop to help you quickly level up your serverless skills, you should check out my Production-Ready Serverless workshop. Over 20 AWS Heroes & Community Builders have passed through this workshop, plus 1000+ students from the likes of AWS, LEGO, Booking, HBO and Siemens.
- If you want to learn how to test serverless applications without all the pain and hassle, you should check out my latest course, Testing Serverless Architectures.
- If you’re a manager or founder and want to help your team move faster and build better software, then check out my consulting services.
- If you just want to hang out, talk serverless, or ask for help, then you should join my FREE Community.