Angular 6 ElasticSearch example - Get All Documents in Index

We had known way to add Document to Elasticsearch Index, this tutorial shows you how to get all Documents and show them.

**Elasticsearch Tutorials**

Contents

Get all Documents in Elasticsearch Index
Practice
Sourcecode

Get all Documents in Elasticsearch Index

Add ElasticSearch to Angular 6 Project

Please visit Angular 6 ElasticSearch – Quick Start – How to add Elasticsearch.js for details.

With the post, you will know how to:
– Add ElasticSearch to Angular 6 Project
– Use it in the project

Add Document to Index

angular-6-elasticsearch-example-add-document-to-index-add-document

Please visit Angular 6 ElasticSearch example – Add Document to Index for details.

Get All Documents in Index

ElasticSearch Service

import { Client } from 'elasticsearch-browser';

@Injectable()
export class ElasticsearchService {

  private client: Client;

  private queryalldocs = {
    'query': {
      'match_all': {}
    }
  };

  getAllDocuments(_index, _type): any {
    return this.client.search({
      index: _index,
      type: _type,
      body: this.queryalldocs,
      filterPath: ['hits.hits._source']
    });
  }
}

import { Client } from 'elasticsearch-browser';

@Injectable()

export class ElasticsearchService {

private client: Client;

private queryalldocs = {

'query': {

'match_all': {}

}

};

getAllDocuments(_index, _type): any {

return this.client.search({

index: _index,

type: _type,

body: this.queryalldocs,

filterPath: ['hits.hits._source']

});

}

The response of search() function should be like:

{
    "hits": {
      "hits": [
        {
          "_source": {
            "fullname": "David Louis",
            "age": 29,
            "address": "P.O. Box 399 4275 Amet Street\nWest Allis NC 36734",
            "published": "15/08/2018, 10:32:23"
          }
        },
        {
          "_source": {
            "fullname": "Katherin Kohen",
            "age": 22,
            "address": "1964 Facilisis Avenue\nBell Gardens Texas 87065",
            "published": "15/08/2018, 10:33:09"
          }
        },
        ...
}

{

"hits": {

"hits": [

{

"_source": {

"fullname": "David Louis",

"age": 29,

"address": "P.O. Box 399 4275 Amet Street\nWest Allis NC 36734",

"published": "15/08/2018, 10:32:23"

}

{

"_source": {

"fullname": "Katherin Kohen",

"age": 22,

"address": "1964 Facilisis Avenue\nBell Gardens Texas 87065",

"published": "15/08/2018, 10:33:09"

}

...

}

Component to implement

customerSources: CustomerSource[];

constructor(private es: ElasticsearchService);
// ...

this.es.getAllDocuments('index', 'type')
  .then(response => {
    this.customerSources = response.hits.hits;
    console.log(response);
  }, error => {
    console.error(error);
  }).then(() => {
    console.log('Show Customer Completed!');
  });

customerSources: CustomerSource[];

constructor(private es: ElasticsearchService);

// ...

this.es.getAllDocuments('index', 'type')

.then(response => {

this.customerSources = response.hits.hits;

console.log(response);

}, error => {

console.error(error);

}).then(() => {

console.log('Show Customer Completed!');

});

With CustomerSource interface:

export interface CustomerSource {
    source: Customer;
}

export interface CustomerSource {

source: Customer;

}

In HTML, we get Customer from CustomerSource._source:

<div *ngFor="let customerSource of customerSources">
  <customer-details [customer]='customerSource._source'></customer-details>
</div>

<customer-details [customer]='customerSource._source'></customer-details>

</div>

Practice

0. Overview

Goal:

angular-6-elasticsearch-example-show-documents-in-index-result

1. Generate Service & Components

Run cmd:
– ng g s elasticsearch
– ng g c customer/add-customer
– ng g c customer/customer-details
– ng g c customer/show-customers

=> Project Structure:

angular-6-elasticsearch-example-show-documents-in-index-project-structure

2. App Module

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { AddCustomerComponent } from './customer/add-customer/add-customer.component';
import { CustomerDetailsComponent } from './customer/customer-details/customer-details.component';
import { ShowCustomersComponent } from './customer/show-customers/show-customers.component';

@NgModule({
  declarations: [
    AppComponent,
    AddCustomerComponent,
    CustomerDetailsComponent,
    ShowCustomersComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { AddCustomerComponent } from './customer/add-customer/add-customer.component';

import { CustomerDetailsComponent } from './customer/customer-details/customer-details.component';

import { ShowCustomersComponent } from './customer/show-customers/show-customers.component';

@NgModule({

declarations: [

AppComponent,

AddCustomerComponent,

CustomerDetailsComponent,

ShowCustomersComponent

imports: [

BrowserModule,

FormsModule,

ReactiveFormsModule,

AppRoutingModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

3. ElasticSearch Service

elasticsearch.service.ts

import { Injectable } from '@angular/core';
import { Client } from 'elasticsearch-browser';

@Injectable({
  providedIn: 'root'
})
export class ElasticsearchService {

  private client: Client;

  private queryalldocs = {
    'query': {
      'match_all': {}
    }
  };

  constructor() {
    if (!this.client) {
      this.connect();
    }
  }

  private connect() {
    this.client = new Client({
      host: 'http://localhost:9200',
      log: 'trace'
    });
  }

  isAvailable(): any {
    return this.client.ping({
      requestTimeout: Infinity,
      body: 'hello grokonez!'
    });
  }

  addToIndex(value): any {
    return this.client.create(value);
  }

  getAllDocuments(_index, _type): any {
    return this.client.search({
      index: _index,
      type: _type,
      body: this.queryalldocs,
      filterPath: ['hits.hits._source']
    });
  }
}

import { Injectable } from '@angular/core';

import { Client } from 'elasticsearch-browser';

@Injectable({

providedIn: 'root'

})

export class ElasticsearchService {

private client: Client;

private queryalldocs = {

'query': {

'match_all': {}

}

};

constructor() {

if (!this.client) {

this.connect();

}

private connect() {

this.client = new Client({

host: 'http://localhost:9200',

log: 'trace'

});

}

isAvailable(): any {

return this.client.ping({

requestTimeout: Infinity,

body: 'hello grokonez!'

});

}

addToIndex(value): any {

return this.client.create(value);

}

getAllDocuments(_index, _type): any {

return this.client.search({

index: _index,

type: _type,

body: this.queryalldocs,

filterPath: ['hits.hits._source']

});

}

4. Components

customer/customer.interface.ts

export interface Customer {
    fullname: string;
    age: number;
    address: string;
    published: string;
}

export interface CustomerSource {
    source: Customer;
}

export interface Customer {

fullname: string;

age: number;

address: string;

published: string;

}

export interface CustomerSource {

source: Customer;

}

4.1 Add Document Component

Please visit: 4_Add_Document_Component (in the previous post) for details.

4.2 Details Component

customer-details.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Customer } from '../customer.interface';

@Component({
  selector: 'customer-details',
  templateUrl: './customer-details.component.html',
  styleUrls: ['./customer-details.component.css']
})
export class CustomerDetailsComponent implements OnInit {

  @Input() customer: Customer;

  constructor() { }

  ngOnInit() {
  }

}

import { Component, OnInit, Input } from '@angular/core';

import { Customer } from '../customer.interface';

@Component({

selector: 'customer-details',

templateUrl: './customer-details.component.html',

styleUrls: ['./customer-details.component.css']

})

export class CustomerDetailsComponent implements OnInit {

@Input() customer: Customer;

constructor() { }

ngOnInit() {

}

customer-details.component.html

<div *ngIf="customer">
  <div>
    <label>Full Name: </label> {{customer.fullname}}
  </div>
  <div>
    <label>Age: </label> {{customer.age}}
  </div>
  <div>
    <label>Address: </label> {{customer.address}}
  </div>
  <div>
    <label>Published: </label> {{customer.published}}
  </div>
  <hr/>
</div>

<div>

<label>Full Name: </label> {{customer.fullname}}

</div>

<div>

<label>Age: </label> {{customer.age}}

</div>

<div>

<label>Address: </label> {{customer.address}}

</div>

<div>

<label>Published: </label> {{customer.published}}

</div>

<hr/>

</div>

4.3 Show Documents Component

show-customers.component.ts

import { Component, OnInit } from '@angular/core';
import { CustomerSource } from '../customer.interface';
import { ElasticsearchService } from '../../elasticsearch.service';

@Component({
  selector: 'show-customers',
  templateUrl: './show-customers.component.html',
  styleUrls: ['./show-customers.component.css']
})
export class ShowCustomersComponent implements OnInit {

  private static readonly INDEX = 'gkz_index';
  private static readonly TYPE = 'customer';

  customerSources: CustomerSource[];

  constructor(private es: ElasticsearchService) { }

  ngOnInit() {
    this.es.getAllDocuments(ShowCustomersComponent.INDEX, ShowCustomersComponent.TYPE)
      .then(response => {
        this.customerSources = response.hits.hits;
        console.log(response);
      }, error => {
        console.error(error);
      }).then(() => {
        console.log('Show Customer Completed!');
      });
  }

}

import { Component, OnInit } from '@angular/core';

import { CustomerSource } from '../customer.interface';

import { ElasticsearchService } from '../../elasticsearch.service';

@Component({

selector: 'show-customers',

templateUrl: './show-customers.component.html',

styleUrls: ['./show-customers.component.css']

})

export class ShowCustomersComponent implements OnInit {

private static readonly INDEX = 'gkz_index';

private static readonly TYPE = 'customer';

customerSources: CustomerSource[];

constructor(private es: ElasticsearchService) { }

ngOnInit() {

this.es.getAllDocuments(ShowCustomersComponent.INDEX, ShowCustomersComponent.TYPE)

.then(response => {

this.customerSources = response.hits.hits;

console.log(response);

}, error => {

console.error(error);

}).then(() => {

console.log('Show Customer Completed!');

});

}

show-customers.component.html

<div *ngFor="let customerSource of customerSources" style="margin-top:20px">
  <customer-details [customer]='customerSource._source'></customer-details>
</div>

<customer-details [customer]='customerSource._source'></customer-details>

</div>

5. App Routing Module

app-routing.module.ts

import { AddCustomerComponent } from './customer/add-customer/add-customer.component';
import { ShowCustomersComponent } from './customer/show-customers/show-customers.component';

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    { path: '', redirectTo: 'add', pathMatch: 'full' },
    { path: 'add', component: AddCustomerComponent },
    { path: 'customers', component: ShowCustomersComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

import { AddCustomerComponent } from './customer/add-customer/add-customer.component';

import { ShowCustomersComponent } from './customer/show-customers/show-customers.component';

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [

{ path: '', redirectTo: 'add', pathMatch: 'full' },

{ path: 'add', component: AddCustomerComponent },

{ path: 'customers', component: ShowCustomersComponent }

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

6. App Component

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'grokonez';
  description = 'Angular - Elasticsearch';
}

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'grokonez';

description = 'Angular - Elasticsearch';

}

app.component.html

<div class="container" style="width: 400px">
	<div style="color: blue; margin-bottom: 20px">
		<h2>{{title}}</h2>
		<h4>{{description}}</h4>
	</div>

	<nav>
		<a routerLink="add" class="btn btn-primary active" role="button" routerLinkActive="active">Add</a>
		<a routerLink="customers" class="btn btn-primary active" role="button" routerLinkActive="active">Customers</a>
	</nav>
	<router-outlet></router-outlet>
</div>

<h2>{{title}}</h2>

<h4>{{description}}</h4>

</div>

<nav>

<a routerLink="customers" class="btn btn-primary active" role="button" routerLinkActive="active">Customers</a>

</nav>

<router-outlet></router-outlet>

</div>

7. Check Result

Run Angular 6 App, go to http://localhost:4200/, add Customer Data, then choose Customers tab:

angular-6-elasticsearch-example-show-documents-in-index-result

Open Browser Console, you can see:

TRACE: 2018-08-15T13:15:42Z
  -> POST http://localhost:9200/gkz_index/customer/_search?filter_path=hits.hits._source
  {
    "query": {
      "match_all": {}
    }
  }
  <- 200
  {
    "hits": {
      "hits": [
        {
          "_source": {
            "fullname": "Jamie Konan",
            "age": 33,
            "address": "Ap #443-336 Ullamcorper. Street\nVisalia VA 54886",
            "published": "15/08/2018, 10:32:47"
          }
        },
        {
          "_source": {
            "fullname": "David Louis",
            "age": 29,
            "address": "P.O. Box 399 4275 Amet Street\nWest Allis NC 36734",
            "published": "15/08/2018, 10:32:23"
          }
        },
        {
          "_source": {
            "fullname": "Katherin Kohen",
            "age": 22,
            "address": "1964 Facilisis Avenue\nBell Gardens Texas 87065",
            "published": "15/08/2018, 10:33:09"
          }
        }
      ]
    }
  }

TRACE: 2018-08-15T13:15:42Z

-> POST http://localhost:9200/gkz_index/customer/_search?filter_path=hits.hits._source

{

"query": {

"match_all": {}

}

<- 200

{

"hits": {

"hits": [

{

"_source": {

"fullname": "Jamie Konan",

"age": 33,

"address": "Ap #443-336 Ullamcorper. Street\nVisalia VA 54886",

"published": "15/08/2018, 10:32:47"

}

{

"_source": {

"fullname": "David Louis",

"age": 29,

"address": "P.O. Box 399 4275 Amet Street\nWest Allis NC 36734",

"published": "15/08/2018, 10:32:23"

}

{

"_source": {

"fullname": "Katherin Kohen",

"age": 22,

"address": "1964 Facilisis Avenue\nBell Gardens Texas 87065",

"published": "15/08/2018, 10:33:09"

}

]

}

Sourcecode

Angular6Elasticsearch-get-Documents

By grokonez | August 15, 2018.

Angular 6 ElasticSearch example – Get All Documents in Index

Get all Documents in Elasticsearch Index

Add ElasticSearch to Angular 6 Project

Add Document to Index

Get All Documents in Index

ElasticSearch Service

Component to implement

Practice

0. Overview

1. Generate Service & Components

2. App Module

3. ElasticSearch Service

4. Components

4.1 Add Document Component

4.2 Details Component

4.3 Show Documents Component

5. App Routing Module

6. App Component

7. Check Result

Sourcecode

Post Tags

Got Something To Say: Cancel reply

Get all Documents in Elasticsearch Index

Add ElasticSearch to Angular 6 Project

Add Document to Index

Get All Documents in Index

ElasticSearch Service

Component to implement

Practice

0. Overview

1. Generate Service & Components

2. App Module

3. ElasticSearch Service

4. Components

4.1 Add Document Component

4.2 Details Component

4.3 Show Documents Component

5. App Routing Module

6. App Component

7. Check Result

Sourcecode

Related Posts

Post Tags

Got Something To Say: Cancel reply