You seem to have an error on this line:
$.each(data[1], function (_, text) { //...
It needs to be:
$.each(data.data[1], function (_, text) { //...
To match the incoming data. Here's the working example:
$(function run() {
var throttledInput = $('#textInput').
keyupAsObservable().
map(function (ev) {
return $(ev.target).val();
}).
filter(function (text) {
return text.length > 2;
}).
throttle(500).
distinctUntilChanged();
function searchWikipedia(term) {
return $.ajaxAsObservable({
url: 'http://en.wikipedia.org/w/api.php',
data: { action: 'opensearch',
search: term,
format: 'json' },
dataType: 'jsonp'
});
}
var suggestions = throttledInput.flatMapLatest(function (text) {
console.debug('Searching wiki', text);
return searchWikipedia(text);
});
var selector = $('#results');
suggestions.subscribe(
function (data) {
console.debug('Data!', data);
selector.empty();
$.each(data.data[1], function (_, text) {
$('<li>' + text + '</li>').appendTo(selector);
});
},
function (e) {
console.debug("ERROR!", e);
selector.empty();
$('<li>Error: ' + e + '</li>').appendTo('#results');
}
);
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs-jquery/1.1.6/rx.jquery.js"></script>
<title>Reactive Elements</title>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Reactive Extensions <small>in JavaScript</small></h1>
</div>
<input id="textInput" type="text" class="form-control"/>
<ul id="results"></ul>
</div>
</body>
</html>
NOTE: My example uses a more current jQuery version (2.1 vs 1.8), however I've done some testing and it does not seem to cause problems.