sample: Knockout+Node+Express+ArangoDB+Foxx

app.js

// --------------------------------------------------------------------------
// This JS file is located at Foxx app folder. (not Express app folder)
// Foxx provides Web APIs of ArangoDB for any server-side you want. (e.g. Node,ASP.NET,Rails...)
// --------------------------------------------------------------------------

(function() {
    "use strict";

    var Foxx = require("org/arangodb/foxx"),
        controller = new Foxx.Controller(applicationContext),
        db = require("org/arangodb").db;

    controller.get("/People/name/:name", function(req, res) { 
        var name = req.params("name"),
            query = "",
            result = null;

        query += "FOR d IN People ";
        query += "FILTER ";
        query += "LIKE(d.name.first, '%" + name + "%', true) || LIKE(d.name.last, '%" + name + "%', true) ";
        query += "LIMIT 100";
        query += "RETURN d";

        result = db._query(query).toArray();
        res.json({ result: result });
    });

}());

first.ts

// -----------------------------------------------------------------
// This TS file (compiled to JS) handles Knockout view-model that works on client-side web browsers.
// -----------------------------------------------------------------

declare var ko: any, $: any, _: any, toastr: any;

// Declare Person Class
class Person {
    obj: any = null; // raw object
    firstName: string = "";
    lastName: string = "";
    fullName: string = "";
    likes: string = "";
    birthday: string = "";

    constructor(obj: any) {
        this.obj = obj;
        this.firstName = obj.name.first;
        this.lastName = obj.name.last;
        this.fullName = obj.name.first + " " + obj.name.last;
        this.likes = obj.likes.join(', ');
        this.birthday = obj.birthday;
    }
}

// Declare ViewModel Class
class ViewModel {
    name: any = ko.observable("john");
    people: any[] = ko.observableArray([]);
    fields: string[] = ['fullName', 'firstName', 'lastName', 'birthday', 'likes'];

    // -------------------------------------------------------------------------------------------------
    // Whenever the variable 'name' changed, this function will be invoked in order to update HTML TABLE written in index.ejs.
    // -------------------------------------------------------------------------------------------------
    private controlNames = ko.computed(() => {
        var name = this.name();

        $.getJSON("http://localhost:8529/dev/my_app/People/name/" + encodeURIComponent(name))
            .done((data) => {
                if ('result' in data) {
                    var array = data.result;

                    this.people.removeAll(); // removeAll() is a Knockout function

                    array.forEach((item) => {
                        this.people.push(new Person(item));
                    });
                    toastr.success("People whose name is matched with '%" + name + "%' are listed.");
                } else {
                    toastr.error("Receiving unexpected JSON data.");
                    this.people.removeAll();
                }
            })
            .fail(() => {
                toastr.error("Web API error is occured.");
                this.people.removeAll();
            });
    }).extend({ rateLimit: { timeout: 1000, method: "notifyWhenChangesStop" } }); // setting delay time
}

var vm = new ViewModel();

ko.punches.enableAll(); // *Write this before ko.applyBindings().*
ko.applyBindings(vm);

footer.ejs

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<script src="//mbest.github.io/knockout.punches/knockout.punches.js"></script>   <!-- a library for Knockout -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/js/toastr.min.js"></script>   <!-- a library for notification -->

<script src="/js/first.js"></script>

</body>
</html>

header.ejs

<!doctype html>
<html lang="en">
<head>
  ..............

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/css/toastr.min.css">
  
</head>
<body>

index.ejs

<!-- 
This EJS(HTML) file works together with Knockout view-model written in first.ts(first.js).
-->

<% include header %>

  <h1><%-title %></h1>
  <p>Welcome to <%-title %></p>

  <label>Name: </label>
  <input data-bind="textInput: name" type="text" />
  <hr>
  <table border=1>
      <thead>
          <tr data-bind="foreach: {data: fields, as: 'field'}">
              <th>{{ field }}</th>
          </tr>
      </thead>
      <tbody data-bind="foreach: {data: people, as: 'person'}">
          <tr data-bind="foreach: {data: $parent.fields, as: 'field'}">
              <td>{{ person[field] }}</td>
          </tr>
      </tbody>
  </table>

<% include footer %>

People.json

/* This is a sample data from full JSON file. */

{
  "gender": "male",
  "name": {
    "first": "Eddy",
    "last": "Mungin"
  },
  "birthday": "1962-01-20",
  "memberSince": "2009-03-10",
  "contact": {
    "region": "225",
    "phone": [
      "225-6296182"
    ],
    "address": {
      "zip": "70757",
      "state": "LA",
      "street": "18 Calvert Cir",
      "city": "Maringouin"
    },
    "email": [
      "eddy.mungin@nosql-matters.org",
      "mungin@nosql-matters.org"
    ]
  },
  "likes": [
    "running",
    "skiing"
  ]
}