Data Loading

Connect your HTML to specific data from DBIndly

This guide explains how to tell DBindly which data to display on your page.

Overview

There are two main scenarios:

  1. Display ONE specific item (e.g., a product detail page)
  2. Display MANY items (e.g., a product listing page)

Loading a Single Item

Method 1: URL Parameter (Recommended)

The simplest way to load a specific data item is via URL parameter.

How it works:

  1. Add ?did=YOUR_DATA_ID to your page URL
  2. DBindly automatically fetches and displays that data

Example URL:

https://yoursite.com/product.html?did=prod_abc123

HTML:

<!-- No special setup needed - DBindly auto-loads from URL -->
<article>
  <h1 dbind_data="name"></h1>
  <p dbind_data="description"></p>
  <span dbind_data="price" dbind_format="currency:USD"></span>
</article>

Best for: Detail pages, dynamic templates, CMS-driven pages

Method 2: JavaScript API

Load data programmatically using DBindly.load().

<div id="product-container">
  <h1 dbind_data="name"></h1>
  <p dbind_data="description"></p>
</div>
 
<script>
  // Option A: Hardcoded ID
  DBindly.load('prod_abc123');
 
  // Option B: From URL parameter
  const params = new URLSearchParams(window.location.search);
  const productId = params.get('id');
  if (productId) {
    DBindly.load(productId);
  }
 
  // Option C: From click event
  document.querySelector('.product-link').addEventListener('click', (e) => {
    const dataId = e.target.dataset.id;
    DBindly.load(dataId);
  });
</script>

Best for: Single-page apps, modal popups, interactive pages

Method 3: Real-Time Reactive Binding

Subscribe to automatic updates when data changes on the server.

<!-- This element automatically updates when prod_abc123 changes -->
<div dbind_reactive="prod_abc123">
  <span dbind_data="stock"></span> items in stock
</div>

Note: Requires reactive: true in your DBindly.init() config:

<script>
  DBindly.init({
    apiKey: 'your-api-key',
    reactive: true
  });
</script>

Best for: Live dashboards, inventory displays, real-time notifications

Loading a Collection

Use dbind_collection to fetch all items from a collection.

<div dbind_collection="products">
  <div dbind_repeat="data">
    <h3 dbind_data="name"></h3>
    <p dbind_data="price" dbind_format="currency:USD"></p>
  </div>
</div>

See Collections & Pagination for full documentation.

Finding Your IDs

Data ID

Each row in your collection has a unique Data ID:

  1. Open DBIndly Dashboard
  2. Go to Collections → Select your collection
  3. Each row shows its Data ID (e.g., prod_abc123, user_xyz789)
  4. Click the copy icon to copy the ID

Collection Slug

Each collection has a URL-safe slug:

  1. Open Dashboard → Collections
  2. Click on your collection
  3. Find the Slug in the settings panel
Collection NameSlug
Productsproducts
Blog Postsblog-posts
Team Membersteam-members

Quick Reference

ScenarioMethodExample
Product detail pageURL parameter?did=prod_123
Modal/popup contentJavaScriptDBindly.load('prod_123')
Live stock counterReactivedbind_reactive="prod_123"
Product listingCollectiondbind_collection="products"

Common Patterns

Dynamic Product Page

Create one HTML template that displays any product based on URL:

<!-- products.html?did=prod_abc123 -->
<!DOCTYPE html>
<html>
<head>
  <title>Product Details</title>
  <script src="https://cdn.dbindly.com/sdk.js"></script>
  <script>
    DBindly.init({ apiKey: 'your-api-key' });
  </script>
</head>
<body>
  <article class="product-detail">
    <img dbind_src="image" dbind_alt="name">
    <h1 dbind_data="name"></h1>
    <p class="price" dbind_data="price" dbind_format="currency:USD"></p>
    <p dbind_data="description"></p>
    <button>Add to Cart</button>
  </article>
</body>
</html>

Link to this page from your product listing:

<div dbind_collection="products">
  <a dbind_repeat="data" dbind_href="'product.html?did=' + dataId">
    <span dbind_data="name"></span>
  </a>
</div>

Modal with Dynamic Content

Load product details into a modal without page reload:

<div class="product-grid" dbind_collection="products">
  <div dbind_repeat="data" class="product-card" onclick="showModal(this.dataset.id)" dbind_attr-data-id="dataId">
    <h3 dbind_data="name"></h3>
    <span dbind_data="price" dbind_format="currency:USD"></span>
  </div>
</div>
 
<!-- Modal -->
<dialog id="product-modal">
  <div id="modal-content">
    <h1 dbind_data="name"></h1>
    <img dbind_src="image" dbind_alt="name">
    <p dbind_data="description"></p>
    <p dbind_data="price" dbind_format="currency:USD"></p>
  </div>
  <button onclick="closeModal()">Close</button>
</dialog>
 
<script>
  function showModal(dataId) {
    DBindly.load(dataId).then(() => {
      document.getElementById('product-modal').showModal();
    });
  }
 
  function closeModal() {
    document.getElementById('product-modal').close();
  }
</script>

Live Dashboard

Display real-time metrics that update automatically:

<div class="dashboard">
  <div class="metric" dbind_reactive="metrics_orders">
    <h3>Orders Today</h3>
    <span class="value" dbind_data="count"></span>
  </div>
 
  <div class="metric" dbind_reactive="metrics_revenue">
    <h3>Revenue</h3>
    <span class="value" dbind_data="total" dbind_format="currency:USD"></span>
  </div>
 
  <div class="metric" dbind_reactive="metrics_visitors">
    <h3>Active Visitors</h3>
    <span class="value" dbind_data="count"></span>
  </div>
</div>

Next Steps