CODEWITHSUNDEEP
javascriptelasticsearchvue.js
Evis
Evis

Reputation: 561

vuejs using elasticsearch api methods

I have a vuejs script and need to use an elasticsearch api method. 

// ./main.js
var Vue = require('vue');

Vue.use(require('vue-resource'));

import ES from './elasticsearch.js';

new Vue({

    el: 'body',

    methods: {
        search: function() {
            // should call the es.search...
        }
    }
});

and the elasticsearch script:

// ./elasticsearch.js
var es = require('elasticsearch');

var client = new es.Client({
  host: 'localhost:9200'
  ,log: 'trace'
});

client.search({
  index: 'my_index',
  type: 'my_type',
  body: {
    fields: {},
    query: {
      match: {
        file_content: 'search_text'
      }
    }
  }
}).then(function (resp) {
    var hits = resp.hits.hits;
}, function (err) {
    console.trace(err.message);
});

So, in the method search in main.js should call the client.search and send the text to be searched in my server (_search_text_).

How do we bind it? Or how do we use the elasticsearch object inside a vuejs method?

Thanks!

Upvotes: 3

Views: 4766

Answers (2)

Linus Borg
Linus Borg

Reputation: 23988

your elasticsearch.js file is not configured correctly as a module: import ES from './elasticsearch' won'T do anything because the file does not export anything.

it should probably look more like this:

// ./elasticsearch.js
var es = require('elasticsearch');

var client = new es.Client({
  host: 'localhost:9200'
  ,log: 'trace'
});

function search (myIndex, myType, searchText)
  return client.search({
    index: myIndex,
    type: myType,
    body: {
      fields: {},
      query: {
        match: {
          file_content: searchText
        }
      }
    }
  }).then(function (resp) {
      return hits = resp.hits.hits;
  }, function (err) {
    console.trace(err.message);
});

export { search }

We define a function named search and export it. Note That I also inxluded return statements to actually return the Promise and result from the function.

Then in main.js we can import it by that name, and use it:

// ./main.js
var Vue = require('vue');

Vue.use(require('vue-resource'));

import { search } from './elasticsearch.js';

new Vue({

    el: 'body',

    methods: {
        search: function() {
            var result = search('someindex', 'sometype', 'Search text here' ).then(function(res) {
  // do something with the result
  })
        }
    }
});

Upvotes: 6

Kaicui
Kaicui

Reputation: 3863

I suppose "resp.hits.hits" in your code is the search result JSON Object Array ,then you can define your vue instance like below:

// ./main.js
var Vue = require('vue');

Vue.use(require('vue-resource'));

import ES from './elasticsearch.js';

new Vue({

    el: 'body',
    data:{
       searchResults:[] //this tell vue it is an array
    }

    methods: {
        search: function() {
           var self = this;
           // call the search and get response data
           client.search(function(resp){
                self.searchResults = resp.hits.hits
           })
        }
    }

});

and in your html,you just bind DOM to searchResults,that's all.

Upvotes: 0

Related Questions