js-data

Respect Your Data

Give your data the treatment it deserves with a framework-agnostic, datastore-agnostic JavaScript ORM built for ease of use and peace of mind. Works in Node.js and in the Browser.

Get Started

Installation

Getting JSData into your app

Where to get JSData

  • npm - npm install --save js-data
  • bower - bower install --save js-data
  • jsdelivr - //cdn.jsdelivr.net/js-data/2.0.0/js-data.js
  • cdnjs - //cdnjs.cloudflare.com/ajax/libs/js-data/2.0.0/js-data.js

When installing via a package manager, the installed dist/ folder has js-data.js, js-data-debug.js, js-data.min.js and js-data.min.map. The CDNs have each of those four files as well.

Dependencies

JSData requires the presence of a Promise constructor in the global environment. In the browser, window.Promise must be available. In Node, global.Promise must be available. Here is a handy library for polyfilling: https://github.com/jakearchibald/es6-promise.

If you can't polyfill the environment, then configure JSData to use a specific Promise constructor directly: JSData.DSUtils.Promise = MyPromiseLib;. This direct configuration method is useful for telling JSData to use the Bluebird library or Angular's $q, etc.

Get JSData into your app

<script type="text/javascript" src="path/to/js-data.min.js"></script>
<script>
  var store = new JSData.DS();
</script>
var JSData = require('js-data');
var store = new JSData.DS();
define(['js-data', function (JSData) {
  var store = new JSData.DS();
});
import JSData from 'js-data';
let store = new JSData.DS();

Example Build Configurations

r.js
Running `r.js -o require.config.js` will produce `bundle.js`

In `index.html` switch `script/main` between `main` (load scripts dynamically) and `bundle` (load bundled scripts)
({
  name: 'main',
  mainConfigFile: 'main.js',
  out: 'bundle.js',
  optimize: 'none'
})
require.config({
  paths: {
    'js-data': '../../bower_components/js-data/dist/js-data'
  }
});

require([
    'app'
  ], function (app) {
    app.bootstrap(); // or whatever
  }
);
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- load scripts dynamically -->
  <script data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>

  <!-- load bundled scripts -->
  <!--<script data-main="bundle" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>-->
</head>
<body>
<h1>My App</h1>
</body>
</html>
browserify
Running `browserify -x axios app.js > bundle.js` will produce `bundle.js`

Note the external dependency "axios" that is excluded from the build (it's not needed when using js-data-angular).
var JSData = require('js-data');
console.log('It works! Using js-data ' + JSData.version.full);
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- load bundled scripts -->
  <script src="bundle.js"></script>
</head>
<body>
<h1>My App</h1>
</body>
</html>
webpack
Running `webpack` will produce `bundle.js`

Note the external dependency "axios" that is excluded from the build (it's not needed when using js-data-angular).
var JSData = require('js-data');
console.log('It works! Using js-data ' + JSData.version.full);
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  }
};
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- load bundled scripts -->
  <script src="bundle.js"></script>
</head>
<body>
<h1>My App</h1>
</body>
</html>

Installation

Getting JSData into your app