Search⌘ K
Home
Courses
The Definitive Guide to MongoDB

Reading Users

Explore how to implement user data retrieval in a MEAN Stack application using MongoDB. Understand how to display all users or filtered results, manage search criteria, and handle backend API requests with Mongoose for efficient database querying.

We'll cover the following...

Let’s follow the pattern established in the previous lesson and make changes to the HTML.

We want to analyze the implementation of reading users from the database and display them in the browser.

There are two situations we want to cover:

  • reading of all users

  • filtering users by some criteria (search option).

Basically, this section of the screen:

Reading Users: HTML Code

Here is the HTML:

C++
<div class="col-sm-8">
        <div class="row">
                <div class="col-sm-2">
                    <label for="Name">Name</label>
                </div>
                <div class="col-sm-2">
                    <label for="Blog">Blog</label>
                </div>
                <div class="col-sm-2">
                    <label for="Age">Age</label>
                </div>
                <div class="col-sm-2">
                    <label for="Location">Location</label>
                </div>
        </div>
        <div class="row" *ngFor="let user of users" (click)="setEditUser(user)">
            <div class="col-sm-2">
                {{user.name}}
            </div>
            <div class="col-sm-2">
                {{user.blog}}
            </div>
            <div class="col-sm-2">
                {{user.age}}
            </div>
            <div class="col-sm-2">
                {{user.location}}
            </div>
        </div>
    <div class="row">
        <div class="col-sm-8">
            <label for="searchByName">Search by name:</label>
            <input class="form-control" type="text" placeholder="Name" [(ngModel)]="searchCriteria" [ngModelOptions]="{standalone: true}"/>
            <button class="btn btn-default" (click)="getUsers()">Search</button>
            <button class="btn btn-default" (click)="clearSearch()">Clear</button>        
        </div>
    <div>

...