MongoDB Stitch - Getting Started

index.html

<!-- Base Stitch Browser SDK -->
<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.0.14/stitch.js"></script>

<div class="results-bar">
  <p>Count of Results:</p>
  <span id="num-results" class="results-bar__count"></span>
</div>
<table class="table table-striped">
  <thead class="thead">
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Gender</th>
      <th>IP Address</th>
    </tr>
  </thead>
  <tbody id='contacts'></tbody>
</table>

mongodb-stitch-getting-started.markdown

MongoDB Stitch - Getting Started

A Pen by Michael Lynn on CodePen.

License.

script.js

const {
  Stitch,
  RemoteMongoClient,
  UserPasswordCredential
} = stitch;

const stitchClient = Stitch.initializeDefaultAppClient("calhacks-ssiva");

login("joe.schmoe@company.com", "SuperSecretPassword123").then(() => {
  // Initialize a MongoDB Service Client
  const mongodb = stitchClient.getServiceClient(
    RemoteMongoClient.factory,
    "mongodb-atlas"
  );
  // Get a hook to the employees collection
  const contacts = mongodb.db("calhacks").collection("contacts");
  
  return contacts.find({}, {
    // limit: 3,
    // sort: { "salary": -1 }
  })
    .asArray();
})
  .then(displayContacts)

function login(email, password) {
  const credential = new UserPasswordCredential(email, password);
  return stitchClient.auth.loginWithCredential(credential);
}


// Renders the the employees' information in the table
function displayContacts(contacts) {
  const contactsTableBody = document.getElementById("contacts");
  const numResultsEl = document.getElementById("num-results");
  const tableRows = contacts.map(contact => {
    return `
      <tr>
        <td>${contact.first_name}, ${contact.last_name}</td>
        <td>${contact.email}</td>
        <td>${contact.gender}</td>
        <td>${contact.ip_address}</td>
      </tr>
    `;
  });
  contactsTableBody.innerHTML = tableRows.join("");
  numResultsEl.innerHTML = contacts.length;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />