---
title: jQuery App Tutorial with the DreamFactory REST API
description: This blog post is about building a to do list app using the DreamFactory Services Platform (DSP) for the backend. We provide a comprehensive REST API and an easy-to-use JavaScript SDK for making API c
image: https://blog.dreamfactory.com/hubfs/Imported_Blog_Media/team-todd-May-07-2024-08-13-09-2699-AM.jpg
---

[![DreamFactory logo](https://cdn.prod.website-files.com/64ed8da8a866be7a702fbae0/68d51994d3678214b54acb60_dreamfactory-navbar-logo.svg)](https://www.dreamfactory.com/)

 Products & Services

[AI Data Gateway](https://www.dreamfactory.com/ai-data-gateway/overview)

[Overview Why DreamFactory exists](https://www.dreamfactory.com/ai-data-gateway/overview) [Data Gov, Comp, Security Policy enforcement at the API layer](https://www.dreamfactory.com/ai-data-gateway/ai-data-governance) [Standard API Layer One contract for every backend](https://www.dreamfactory.com/ai-data-gateway/standard-api-layer) [API Gateway Functionality Routing, auth, rate limits, observability](https://www.dreamfactory.com/ai-data-gateway/api-gateway-functionality) [Deployment & Integration Self-hosted, cloud, hybrid](https://www.dreamfactory.com/ai-data-gateway/on-premise-deployment-and-integration) [Developer Productivity Auto-generated, never hand-coded](https://www.dreamfactory.com/ai-data-gateway/ai-development-accelerated) [AI App Architectures Patterns for RAG, agents, MCP](https://www.dreamfactory.com/ai-data-gateway/enterprise-ai-architectures)

AI Data Models

[AIOpenAI](https://www.dreamfactory.com/use-cases/openai) [GGoogle Gemini](https://www.dreamfactory.com/use-cases/google-gemini) [CAnthropic Claude](https://www.dreamfactory.com/use-cases/anthropic-claude-landing) [LMeta Llama](https://www.dreamfactory.com/use-cases/meta-llama) [MMistral AI](https://www.dreamfactory.com/use-cases/mistral) [CoCohere](https://www.dreamfactory.com/use-cases/cohere)

Services and support

[Quickstart Service Packages Expert-led Quickstarts to production](https://www.dreamfactory.com/services-and-support/quickstart-services-packages)

API Management

[Generate & Manage REST APIs From any database, in seconds](https://www.dreamfactory.com/api-management/generate-rest-apis) [Features Security, scripting, self-hosted & more](https://www.dreamfactory.com/api-management/features) [API Generation The complete guide to auto-generated APIs](https://blog.dreamfactory.com/a-complete-guide-to-api-generation) [API Management Concepts, tools, and best practises](https://blog.dreamfactory.com/what-is-api-management-a-brief-overview-of-api-management-concepts-and-tools?_gl=1*jl0njh*_gcl_au*MjQzMjgwMTc3LjE3ODIzMjI3MzY)

 Use Cases

AI Use Cases

[AI Data Access Secure, governed reads for your LLMs](https://www.dreamfactory.com/use-cases/ai-data-access) [MCP Server Drop-in Model Context Protocol](https://www.dreamfactory.com/use-cases/mcp-server) [Legacy Modernization Wrap mainframes with REST](https://www.dreamfactory.com/use-cases/legacy-modernization) [Data Governance Audit every call, enforce every policy](https://www.dreamfactory.com/use-cases/data-governance)

[Customer Case Studies](https://www.dreamfactory.com/case-studies)

[Energy Modernization](https://www.dreamfactory.com/case-studies/energy-snowflake-modernization) [Government Modernization](https://www.dreamfactory.com/case-studies/government-mainframe-oracle-modernization) [Government Business Intelligence](https://www.dreamfactory.com/case-studies/government-sql-server-bi-analyst-queries) [Manufacturing Modernization](https://www.dreamfactory.com/case-studies/steel-manufacturing-sap-erp-modernization) [Financial Services Investor Portal](https://www.dreamfactory.com/case-studies/financial-services-sql-server-investor-portal) [Non-Profit Partner Data Sharing](https://www.dreamfactory.com/case-studies/non-profit-sql-server-partner-data-sharing) [Professional Services Exec Dashboards](https://www.dreamfactory.com/case-studies/professional-services-erp-dashboards) [Education HR and External Data Sharing](https://www.dreamfactory.com/case-studies/education-student-hr-sql-server-mysql-external-data-sharing)

 Industries

Industries

#### [Healthcare HIPAA-grade APIs across EHR, claims, and labs.](https://www.dreamfactory.com/use-cases/healthcare)

#### [Financial Services Portfolios, partners, and portals on one layer.](https://www.dreamfactory.com/use-cases/financial-services)

#### [Government Modernize mainframes without re-platforming.](https://www.dreamfactory.com/use-cases/government)

#### [Manufacturing SAP, MES, and shop-floor data, governed.](https://www.dreamfactory.com/use-cases/manufacturing)

#### [Spotlight How enterprises run on DreamFactory From healthcare to energy to finance — governance baked into every endpoint. Browse case studies →](https://www.dreamfactory.com/case-studies)

 Connectors

SQL Database

[SQL SQL Server](https://www.dreamfactory.com/connectors/sql-server) [OR Oracle](https://www.dreamfactory.com/connectors/oracle) [PG PostgreSQL](https://www.dreamfactory.com/connectors/postgresql) [My MySQL](https://www.dreamfactory.com/connectors/mysql)

NoSQL & Docs

[Dy DynamoDB](https://www.dreamfactory.com/connectors/dynamodb) [Do DocumentDB](https://www.dreamfactory.com/connectors/azure-documentdb) [Mo MongoDB](https://www.dreamfactory.com/connectors/mongodb) [Cb CouchDB](https://www.dreamfactory.com/connectors/couch-db)

Cloud Warehouses

[S3 S3](https://www.dreamfactory.com/connectors/amazon-s3) [Ab Azureblob](https://www.dreamfactory.com/connectors/azure-blob) [FS FTP/SFTP](https://www.dreamfactory.com/connectors/ftp-sftp) [LS Local Storage](https://www.dreamfactory.com/connectors/local-storage)

C & SaaS

[Sf Salesforce](https://www.dreamfactory.com/connectors/salesforce) [API REST / SOAP](https://www.dreamfactory.com/connectors/soap-to-rest)

[See all 30+ connectors](https://www.dreamfactory.com/connectors)

[Blog](https://blog.dreamfactory.com/)

[FREE 30 Minute Demo](https://www.dreamfactory.com/demo)

[![DreamFactory logo](https://cdn.prod.website-files.com/64ed8da8a866be7a702fbae0/68d51994d3678214b54acb60_dreamfactory-navbar-logo.svg)](https://www.dreamfactory.com/)

![hamburger](https://blog.dreamfactory.com/hubfs/raw_assets/public/dreamfactory/images/megamenu/menu-hamburger.svg) ![close](https://blog.dreamfactory.com/hubfs/raw_assets/public/dreamfactory/images/megamenu/close-menu.svg)

 Back to main menu

 Products & Services

 Use Cases

 Industries

 Connectors

[Blog](https://blog.dreamfactory.com/)

[FREE 30 Minute Demo](https://www.dreamfactory.com/demo)

[AI Data Gateway](https://www.dreamfactory.com/ai-data-gateway/overview)

[Overview Why DreamFactory exists](https://www.dreamfactory.com/ai-data-gateway/overview) [Data Gov, Comp, Security Policy enforcement at the API layer](https://www.dreamfactory.com/ai-data-gateway/ai-data-governance) [Standard API Layer One contract for every backend](https://www.dreamfactory.com/ai-data-gateway/standard-api-layer) [API Gateway Functionality Routing, auth, rate limits, observability](https://www.dreamfactory.com/ai-data-gateway/api-gateway-functionality) [Deployment & Integration Self-hosted, cloud, hybrid](https://www.dreamfactory.com/ai-data-gateway/on-premise-deployment-and-integration) [Developer Productivity Auto-generated, never hand-coded](https://www.dreamfactory.com/ai-data-gateway/ai-development-accelerated) [AI App Architectures Patterns for RAG, agents, MCP](https://www.dreamfactory.com/ai-data-gateway/enterprise-ai-architectures)

AI Data Models

[AIOpenAI](https://www.dreamfactory.com/use-cases/openai) [GGoogle Gemini](https://www.dreamfactory.com/use-cases/google-gemini) [CAnthropic Claude](https://www.dreamfactory.com/use-cases/anthropic-claude-landing) [LMeta Llama](https://www.dreamfactory.com/use-cases/meta-llama) [MMistral AI](https://www.dreamfactory.com/use-cases/mistral) [CoCohere](https://www.dreamfactory.com/use-cases/cohere)

Services and support

[Quickstart Service Packages Expert-led Quickstarts to production](https://www.dreamfactory.com/services-and-support/quickstart-services-packages)

AI Data Models

[Generate & Manage REST APIs From any database, in seconds](https://www.dreamfactory.com/api-management/generate-rest-apis) [Features Security, scripting, self-hosted & more](https://www.dreamfactory.com/api-management/features) [API Generation The complete guide to auto-generated APIs](https://blog.dreamfactory.com/a-complete-guide-to-api-generation) [API Management Concepts, tools, and best practises](https://blog.dreamfactory.com/what-is-api-management-a-brief-overview-of-api-management-concepts-and-tools?_gl=1*jl0njh*_gcl_au*MjQzMjgwMTc3LjE3ODIzMjI3MzY)

AI Use Cases

[AI Data Access Secure, governed reads for your LLMs](https://www.dreamfactory.com/use-cases/ai-data-access) [MCP Server Drop-in Model Context Protocol](https://www.dreamfactory.com/use-cases/mcp-server) [Legacy Modernization Wrap mainframes with REST](https://www.dreamfactory.com/use-cases/legacy-modernization) [Data Governance Audit every call, enforce every policy](https://www.dreamfactory.com/use-cases/data-governance)

[Customer Case Studies](https://www.dreamfactory.com/case-studies)

[Energy Modernization](https://www.dreamfactory.com/case-studies/energy-snowflake-modernization) [Government Modernization](https://www.dreamfactory.com/case-studies/government-mainframe-oracle-modernization) [Government Business Intelligence](https://www.dreamfactory.com/case-studies/government-sql-server-bi-analyst-queries) [Manufacturing Modernization](https://www.dreamfactory.com/case-studies/steel-manufacturing-sap-erp-modernization) [Financial Services Investor Portal](https://www.dreamfactory.com/case-studies/financial-services-sql-server-investor-portal) [Non-Profit Partner Data Sharing](https://www.dreamfactory.com/case-studies/non-profit-sql-server-partner-data-sharing) [Professional Services Exec Dashboards](https://www.dreamfactory.com/case-studies/professional-services-erp-dashboards) [Education HR and External Data Sharing](https://www.dreamfactory.com/case-studies/education-student-hr-sql-server-mysql-external-data-sharing)

Industries

#### [Healthcare HIPAA-grade APIs across EHR, claims, and labs.](https://www.dreamfactory.com/use-cases/healthcare)

#### [Financial Services Portfolios, partners, and portals on one layer.](https://www.dreamfactory.com/use-cases/financial-services)

#### [Government Modernize mainframes without re-platforming.](https://www.dreamfactory.com/use-cases/government)

#### [Manufacturing SAP, MES, and shop-floor data, governed.](https://www.dreamfactory.com/use-cases/manufacturing)

SQL Database

[SQL SQL Server](https://www.dreamfactory.com/connectors/sql-server) [OR Oracle](https://www.dreamfactory.com/connectors/oracle) [PG PostgreSQL](https://www.dreamfactory.com/connectors/postgresql) [My MySQL](https://www.dreamfactory.com/connectors/mysql)

NoSQL & Docs

[Dy DynamoDB](https://www.dreamfactory.com/connectors/dynamodb) [Do DocumentDB](https://www.dreamfactory.com/connectors/azure-documentdb) [Mo MongoDB](https://www.dreamfactory.com/connectors/mongodb) [Cb CouchDB](https://www.dreamfactory.com/connectors/couch-db)

Cloud Warehouses

[S3 S3](https://www.dreamfactory.com/connectors/amazon-s3) [Ab Azureblob](https://www.dreamfactory.com/connectors/azure-blob) [FS FTP/SFTP](https://www.dreamfactory.com/connectors/ftp-sftp) [LS Local Storage](https://www.dreamfactory.com/connectors/local-storage)

C & SaaS

[Sf Salesforce](https://www.dreamfactory.com/connectors/salesforce) [API REST / SOAP](https://www.dreamfactory.com/connectors/soap-to-rest)

[See all 30+ connectors](https://www.dreamfactory.com/connectors)

[![back arrow](https://blog.dreamfactory.com/hubfs/raw_assets/public/dreamfactory/images/orange-arrow.svg) Blog](https://blog.dreamfactory.com/)

# jQuery App Tutorial with the DreamFactory REST API

 by Terence Bennett

![calendar icon](https://blog.dreamfactory.com/hubfs/raw_assets/public/dreamfactory/images/calendar-icon.svg) July 6, 2018

Table of contents

RECOMMENDED ARTICLES

- [A Complete Guide to API Generation](https://blog.dreamfactory.com/a-complete-guide-to-api-generation)
- [10 Best API Management Tools](https://blog.dreamfactory.com/what-is-api-management-a-brief-overview-of-api-management-concepts-and-tools)
- [Creating a Microsoft SQL Server API in Less Than 5 minutes with DreamFactory](https://blog.dreamfactory.com/creating-a-microsoft-sql-server-api-in-less-than-5-minutes-with-dreamfactory)
- [Hasura vs. DreamFactory: A Comprehensive Comparison](https://blog.dreamfactory.com/hasura-vs-dreamfactory)
- [Build A Snowflake REST API in Less Than 5 Minutes](https://blog.dreamfactory.com/generate-a-snowflake-rest-api-in-less-than-5-minutes)

![ToddAppleton](https://blog.dreamfactory.com/hubfs/Imported_Blog_Media/team-todd-May-07-2024-08-13-09-2699-AM.jpg)

This blog post is about building a todo list app using DreamFactory for the backend. We provide a [comprehensive REST API](https://blog.dreamfactory.com/the-reusable-rest-api-platform-strategy/) and an easy-to-use JavaScript SDK for making API calls. This example will show you how to authenticate to your DreamFactory instance and then make simple CRUD calls using the SDK.

If you don’t have a DreamFactory account, sign up [here](https://genie.dreamfactory.com/). This app can be installed as a sample app inside DreamFactory; just look for the app named "Todo List jQuery w/SDK". If you don't have it installed you can import it from GitHub using the apps tab in the admin console.

## Code Walkthrough

This app consists of three files plus the SDK.

**index.html** - loads jQuery and Twitter Bootstrap and has a table to hold the list. It has an input field and add button for adding items to the list.

**app.js** - functions for creating, retrieving, updating, and deleting list items and building the list.

**style.css** - simple styling

The complete source code for this app is available on GitHub at [https://github.com/dreamfactorysoftware/app-todo-jquery](https://github.com/dreamfactorysoftware/app-todo-jquery).  You can go there to clone this repo to your local machine.

In the SDK /lib directory there is a file sdk\_init.js. This is where you specify the name of your app and the DreamFactory instance your app is talking to. For hosted apps that use the DSP for app file storage you could set dsp\_url to use location.protocol and location.host and it would always init the SDK to use the "current" DreamFactory instance. If not a hosted app then dsp\_url should be set to the DSP you want to use for that app.

When the SDK has been initialized the 'apiReady' event is triggered. At that point the app is ready to make API calls. The first thing we should do is check for a valid session and, if none exists, try to log in. The doLoginDialog() and login() methods take care of this.

```
$(window).on("apiReady", function () {
    checkSession();
});
function checkSession() {
    $("#loading").show();
    // check for existing session, relevant when code is hosted on the dsp
    window.df.apis.user.getSession({"body": {}}, function (response) {
        $("#loading").hide();
        // existing session found, assign session token
        // to be used for the session duration
        var session = new ApiKeyAuthorization(
            "X-Dreamfactory-Session-Token",
            response.session_id,
            'header');
        window.authorizations.add("X-DreamFactory-Session-Token", session);
        runApp();
    }, function (response) {
        $("#loading").hide();
        // no valid session, try to log in
        doLogInDialog();
    });
}
```

After a session has been established we call runApp() which is the main entry point into the app. The function getRecords() uses the SDK to retrieve all records from the database table named todo. You could easily use NoSQL storage such as MongoDB by adding it as a new service on your DSP, then changing df.apis.db to df.apis.mongodb in each SDK call.

```
function runApp() {
    // your app starts here
    getRecords();
}
function getRecords() {
    window.df.apis.db.getRecords({"table_name":"todo"},
    function (response) {
        buildItemList(response);
    }, crudError
    );
}
}
```

On success, an array of records is returned such as

```
{
   "record":[
      {
         "id":"35",
         "name":"item 1",
         "complete":false
      },
      {
         "id":"36",
         "name":"item 2",
         "complete":true
      },
      {
         "id":"38",
         "name":"item 3",
         "complete":false
      }
   ]
}
```

buildItemList() uses this array to populate a table inside the list-container div. Column 1 of the table is for the delete icon. Column two is for the item name. The id of each item is stored in data-id and used when the item is updated or deleted. Note the onclick handlers being set up for the update and delete ui elements. This is where the completion is toggled.

```
function buildItemList(json) {
    var html = '';
    if (json.record) {
        json.record.forEach(function (entry) {
            var name = entry.name;
            var id = entry.id;
            html += '';
            html += '';
            if (entry.complete === true) {
                html += '' + name + '';
            } else {
                html += '' + name + '';
            }
            html += '';
        });
    }
    $('table').html(html);
    $('#list-container .item').click(function (e) {
        var id = $(this).data('id');
        var complete = $(this).hasClass('strike');
        updateRecord(id, !complete);
    });
    $('#list-container i').click(function (e) {
        var id = $(this).data('id');
        deleteRecord(id);
    });
}
```

When you enter a new item and click the Add Item button, the function createRecord() is called. It grabs the item name from the input field and, if not empty, calls the SDK createRecords() method. The POST data is passed in as the "body" field and is an array of JS objects. In this case there's only one element in the array. Since it's a new item we will set the complete field to false. On success the input field is cleared and the list is rebuilt. To keep things as simple as possible we are calling getRecords() to retrieve and rebuild the entire list rather than updating the DOM with only the items that changed.

```
function createRecord() {
    var name = $('#itemname').val();
    if (name === '') return;
    var item = {"record":[
        {"name":name, "complete":false}
    ]};
    df.apis.db.createRecords({"table_name":"todo", "body":item},
    function (response) {
        $('#itemname').val('');
        getRecords();
    }, crudError
    );
}
```

You can click an item in the list to toggle its completion status. Each time you do this the function updateRecord() will be called. It calls the SDK method mergeRecords() with body containing an array of records to be updated. The database id must be included for each record being updated.

```
function updateRecord(id, complete) {
    var item = {"record":[
        {"id":id, "complete":complete}
    ]};
    df.apis.db.mergeRecords({"table_name":"todo", "body":item},
    function (response) {
        getRecords();
    }, crudError
    );
}
```

You can click the minus button next to an item to delete it from the list. Each time you do this the function deleteRecord() will be called. It calls the SDK method deleteRecords() with the ids field containing a comma-delimited list of ids to delete.

```
function deleteRecord(id) {
    df.apis.db.deleteRecords({"table_name":"todo", "ids":id},
    function (response) {
        getRecords();
    }, crudError
    );
}
```

Hopefully this gives you a basic understanding of how to use the SDK for CRUD operations. You can experiment directly with the API using the Live API Docs tab in the admin console of your DSP. You can use your developer tools to examine each API request in detail. Please post any questions or comments and we'll get back to you.

TAGS: [API Management,](https://blog.dreamfactory.com/tag/api-management-2) [Services,](https://blog.dreamfactory.com/tag/services) [REST,](https://blog.dreamfactory.com/tag/rest) [Data Sources,](https://blog.dreamfactory.com/tag/data-sources) [SOAP](https://blog.dreamfactory.com/tag/soap)

![Terence Bennett](https://blog.dreamfactory.com/hs-fs/hubfs/1624046620145.jpg?width=100&height=100&name=1624046620145.jpg)

Terence Bennett

Terence Bennett, CEO of DreamFactory, has a wealth of experience in government IT systems and Google Cloud. His impressive background includes being a former U.S. Navy Intelligence Officer and a former member of Google's Red Team. Prior to becoming CEO, he served as COO at DreamFactory Software.

 Stay Connected with   
 The Connector Newsletter!

 Subscribe to stay up-to-date with DreamFactory's latest product updates, API best practices, and tech humor in your inbox.

[![Dreamfactory Logo](https://blog.dreamfactory.com/hubfs/raw_assets/public/dreamfactory/images/megamenu/Megamenu-logo.svg)](https://www.dreamfactory.com/)

[Call Sales +1 (415) 993-5877](tel:+14159935877)

Open – Mon–Fri 9–5 PT

[FREE 30 Minute Demo](https://www.dreamfactory.com/demo)

#### Follow us

- [GitHub](https://github.com/dreamfactorysoftware/dreamfactory)
- [Facebook](https://www.facebook.com/dfsoftwareinc/)
- [X (Twitter)](https://twitter.com/dfsoftwareinc)
- [LinkedIn](https://www.linkedin.com/company/dreamfactory-software)
- [YouTube](https://www.youtube.com/c/dreamfactorysoftware)

### Features

[Features](https://www.dreamfactory.com/features) [Self hosted](https://www.dreamfactory.com/features#self) [API Generation](https://www.dreamfactory.com/features#api) [Security](https://www.dreamfactory.com/features#secure) [Customization](https://www.dreamfactory.com/features#custom) [Pricing](https://www.dreamfactory.com/pricing)

### Installers

[Linux](https://www.dreamfactory.com/features#installer) [Docker](https://www.dreamfactory.com/features#installer) [Kubernetes](https://www.dreamfactory.com/features#installer)

### API Resources

[Documentation](https://docs.dreamfactory.com/) [Case Studies](https://www.dreamfactory.com/stories) [White Papers](https://www.dreamfactory.com/resources/whitepapers) [Academy](https://www.dreamfactory.com/academy) [API Calculator](https://calculator.dreamfactory.com) [Open Source](https://github.com/dreamfactorysoftware)

### Company

[Blog](https://blog.dreamfactory.com/) [Hub](https://www.dreamfactory.com/hub) [About us](https://www.dreamfactory.com/about) [Partners](https://www.dreamfactory.com/partners) [Support](https://www.dreamfactory.com/support) [Connectors](https://www.dreamfactory.com/connectors) [Contact Us](https://www.dreamfactory.com/demo)

 © 2025 DreamFactory. All rights reserved.

[Terms of Use](https://www.dreamfactory.com/terms-of-use) [Privacy Policy](https://www.dreamfactory.com/privacy-policy) [LLMs](https://www.dreamfactory.com/llms.txt)

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Terence Bennett",
    "url" : "https://blog.dreamfactory.com/author/terencebennett"
  },
  "dateModified" : "2024-05-07T08:21:16.059Z",
  "datePublished" : "2018-07-06T11:19:27.000Z",
  "headline" : "jQuery App Tutorial with the DreamFactory REST API",
  "image" : [ "https://blog.dreamfactory.com/hubfs/Imported_Blog_Media/team-todd-May-07-2024-08-13-09-2699-AM.jpg" ],
  "mainEntityOfPage" : {
    "@id" : "https://blog.dreamfactory.com/jquery-app-tutorial-with-the-dreamfactory-rest-api",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://blog.dreamfactory.com/hubfs/DreamFactory%20-%20Orange%20-%20Transparent-1.png"
    }
  }
}
```