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.

Related Posts:
Angular 6 ElasticSearch – Quick Start – How to add Elasticsearch.js
Angular 6 ElasticSearch example – Add Document to Index
– Next:
+ Angular 6 ElasticSearch example – Documents Pagination with Scroll
+ Angular 6 ElasticSearch example – simple Full Text Search

**Elasticsearch Tutorials**

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

The response of search() function should be like:

Component to implement

With CustomerSource interface:

In HTML, we get Customer from CustomerSource._source:

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

3. ElasticSearch Service

elasticsearch.service.ts

4. Components

customer/customer.interface.ts

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

customer-details.component.html

4.3 Show Documents Component

show-customers.component.ts

show-customers.component.html

5. App Routing Module

app-routing.module.ts

6. App Component

app.component.ts

app.component.html

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:

Sourcecode

Angular6Elasticsearch-get-Documents

By grokonez | August 15, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*