1

I'm trying to figure out how I can convert my Angular 1.x search service for Elasticsearch that uses promises (q library) to an Angular 4.x search service using Observables?

OR

I've also seen toPromise, where an Observable is converted to a promise and vise versa. However, I've seen a handful of simple examples for search and autocomplete using Observables, so it seems Observables is the preferred way of using HTTP in Angular 4.

This was what I used for autocomplete in Angular 1.x

this.getSuggestions = function(query) {
    var deferred = $q.defer();

    esClient.search({
      index: 'query-index',
      body: {
        "query": {
          "match_phrase_prefix": {
            "suggestions": {
              "query": query,
              "max_expansions": 10,
              "lenient": true
            }
          }
        },
        "size": 5,
        "from": 0,
        "_source": ["suggestions"]
      }
    }).then(function(es_return) {
      deferred.resolve(es_return);
    }, function(error) {
      deferred.reject(error);
    });

    return deferred.promise;
  };

I'm not sure really where to even begin on how to convert that to an Observable?

eko
  • 39,722
  • 10
  • 72
  • 98
user3125823
  • 1,846
  • 2
  • 18
  • 46
  • 1
    Since you're not using `Http` service here, I don't see how this is relevant to observables at all. esClient.search returns a promise, doesn't it? Use promises. Of course, you can upgrade them to observables later, but this affects more than one snippet of code. This requires some homework to be done and cannot be solved in a single question. – Estus Flask Jul 11 '17 at 14:40
  • @estus - I've already done the other homework, I showed this one snippet for brevity's sake... and wanted to make the question as concise as possible – user3125823 Jul 11 '17 at 14:44
  • There is no need to manufacture a promise with `$q.defer` as the `.then` method already returns a promise. See [Is this a “Deferred Antipattern”?](https://stackoverflow.com/questions/30750207/is-this-a-deferred-antipattern). – georgeawg Jul 11 '17 at 14:49
  • 1
    A good question requires to know half the answer. Unless you are sure that this is the only relevant snippet in code base, I would suggest to share http://stackoverflow.com/help/mcve with your attempts on Angular 4, since it shouldn't be expected that the answerer will write all code from scratch. – Estus Flask Jul 11 '17 at 14:50
  • @georgeawg There is a need since esClient.search() is likely not a $q promise. The proper way would be `return $q.when(esClient.search())`, but any way, this is primarily A4 question. – Estus Flask Jul 11 '17 at 14:55
  • @estus - where do I say I expect all code from scratch? An answer has already been given WITHOUT any code at all, but helpful tips and links that I can use to write the necessary code... – user3125823 Jul 11 '17 at 15:04
  • @user3125823 That's the answer that can be expected if a question isn't concrete enough. Link-only answers aren't considered good ones on SO and should be comments instead. But if it worked for you, good for you then, I guess this is the example you were looking for. – Estus Flask Jul 11 '17 at 15:15
  • @estus - sometimes a link or a tip is all you need... I just needed a starting point – user3125823 Jul 11 '17 at 15:19

1 Answers1

0

I would say that, instead of reinventing the wheel, just use what's built.

You can use this Angular's elastic search library:

https://github.com/byavv/angular2-elastic

Or check in this thread how it has been adapted to new Angular version:

https://github.com/elastic/elasticsearch-js/issues/452#issuecomment-286738342

I would go for the first option, it includes:

  • Angular2 elasticsearch
  • Autocomplete sample

I believe that's what you are looking for, right?

SrAxi
  • 19,787
  • 11
  • 46
  • 65