Using RxJs I am trying to reproduce a demo. But i am not getting any result. Instead getting error as : distinct.flatMapLatest is not a function

what is wrong i did here? do i required to add any library here?

here is my try: but look in to demo to get real issue what is face.

$(document).ready(function(){

var $input = $('#input'),
    $results = $('#results');

var keyups = Rx.Observable.fromEvent($input, 'keyup')
    .map(e => e.target.value)
    .filter(text => text.length > 2);

var throttled = keyups.throttle(500);

var distinct = throttled.distinctUntilChanged();

function searchWikipedia (term) {
    return $.ajax({
        url: '.php',
        dataType: 'jsonp',
        data: {
            action: 'opensearch',
            format: 'json',
            search: term
        } 
    }).promise();

}


var suggestions = distinct.flatMapLatest(searchWikipedia);

suggestions.subscribe(data => {
    var res = data[1];
    /* Do something with the data like binding */
    $results.empty();

    $.each(res, (_, value) => $('<li>' + value + '</li>').appendTo($results));
}, error => {
    /* handle any errors */
    $results.empty();

    $('<li>Error: ' + error + '</li>').appendTo($results);

});

})

Live Demo

Using RxJs I am trying to reproduce a demo. But i am not getting any result. Instead getting error as : distinct.flatMapLatest is not a function

what is wrong i did here? do i required to add any library here?

here is my try: but look in to demo to get real issue what is face.

$(document).ready(function(){

var $input = $('#input'),
    $results = $('#results');

var keyups = Rx.Observable.fromEvent($input, 'keyup')
    .map(e => e.target.value)
    .filter(text => text.length > 2);

var throttled = keyups.throttle(500);

var distinct = throttled.distinctUntilChanged();

function searchWikipedia (term) {
    return $.ajax({
        url: 'http://en.wikipedia/w/api.php',
        dataType: 'jsonp',
        data: {
            action: 'opensearch',
            format: 'json',
            search: term
        } 
    }).promise();

}


var suggestions = distinct.flatMapLatest(searchWikipedia);

suggestions.subscribe(data => {
    var res = data[1];
    /* Do something with the data like binding */
    $results.empty();

    $.each(res, (_, value) => $('<li>' + value + '</li>').appendTo($results));
}, error => {
    /* handle any errors */
    $results.empty();

    $('<li>Error: ' + error + '</li>').appendTo($results);

});

})

Live Demo

• javascript
• rxjs

1 Answer 1

In RxJS 5, flatMapLatest has been renamed to switchMap.

var suggestions = distinct.switchMap(searchWikipedia);