A brief tutorial illustrating how to set up model relations.
Page Contents

loopback-example-relations

$ git clone https://github.com/strongloop/loopback-example-relations.git
$ cd loopback-example-relations
$ npm install
$ node .

In this example, we create a simple web app to demonstrate model relation concepts. The app consists of a single web page with a list of links to help us query and filter sample data via REST.

Prerequisites

Tutorials

Knowledge

Procedure

Create the application

Application information

  • Name: loopback-example-relations
  • Directory to contain the project: loopback-example-relations
$ slc loopback loopback-example-relations
... # follow the prompts
$ cd loopback-example-relations

Create the datasource

  • Name: transient
  • Connector: other
    • Name: transient
$ slc loopback:datasource
... # follow the prompts, choose `other` to define custom connector

Create the models

Model information

  • Name: Customer
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: Yes
    • Custom plural form: Leave blank
    • Properties:
      • name
        • String
        • Not Required
      • age
        • number
        • Not Required
  • Name: Order
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: Yes
    • Custom plural form: Leave blank
    • Properties:
      • description
        • String
        • Not Required
      • date
        • date
        • Not Required
  • Name: Account
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • name
        • String
        • Not Required
      • date
        • date
        • Not Required
  • Name: Address
    • Data source: transient
    • Base class: Model
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • street
        • String
        • Not Required
      • city
        • String
        • Not Required
      • state
        • String
        • Not Required
      • zipCode
        • String
        • Not Required
  • Name: Author
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • name
        • String
        • Not Required
  • Name: Book
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: Yes
    • Custom plural form: Leave blank
    • Properties:
      • name
        • String
        • Not Required
  • Name: EmailAddress
    • Data source: transient
    • Base class: PersistedModel
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • label
        • String
        • Not Required
      • address
        • String
        • Not Required
  • Name: Link
    • Data source: transient
    • Base class: Model
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • id
        • number
        • Required

          Please set "id": true manually for this property, like link.json

      • name
        • String
        • Not Required
      • notes
        • String
        • Not Required
  • Name: Reader
    • Data source: db (memory)
    • Base class: PersistedModel
    • Expose over REST: No
    • Custom plural form: Leave blank
    • Properties:
      • name
        • String
        • Not Required
$ slc loopback:model Customer
... # follow the prompts, repeat for other models

Upper-case in model’s name would be interpreted as ‘-‘ in model’s file name, eg: EmailAddress has email-address.json

Configure server-side views

LoopBack comes preconfigured with EJS out-of-box. This means we can use server-side templating by simply setting the proper view engine and a directory to store the views.

Create a views directory to store server-side templates.

$ mkdir server/views

Create index.ejs in the views directory. Create account.ejs in the views directory. Create email.ejs in the views directory. Create address.ejs in the views directory.

Configure server.js to use server-side templating. Remember to import the path package.

Replace root

Replace the default root.js with a new one which passes a given customer’s id to template engine.

Add sample data

Create six boot scripts:

We add z- in front of the boot script names to make sure they load last since LoopBack boot loads boot scripts alphabetically.

Create model relations

Model relation information

  • Customer
    • has many
      • Order
        • Property name for the relation: orders
        • Custom foreign key: customerId
        • Require a through model: No

      • Other Relations: (please add them manually)

        "address": {
  "type": "embedsOne",
  "model": "Address",
  "property": "billingAddress",
  "options": {
    "validate": true,
    "forceId": false
  }
},
"emails": {
  "type": "embedsMany",
  "model": "EmailAddress",
  "property": "emailList",
  "options": {
    "validate": true,
    "forceId": false
  }
},
"accounts": {
  "type": "referencesMany",
  "model": "Account",
  "property": "accountIds",
  "options": {
    "validate": true,
    "forceId": false
  }
},

  • Book(please add them manually)

    "people": {
    "type": "embedsMany",
    "model": "Link",
    "scope": {
      "include": "linked"
    }
}

  • Link(please add them manually)

    "linked": {
  "type": "belongsTo",
  "polymorphic": {
    "idType": "number"
  },
  "properties": {
    "name": "name"
  },
  "options": {
    "invertProperties": true
  }
}
  • Order
    • belongs to
      • Customer
        • Property name for the relation: Leave blank - defaults to customer
        • Custom foreign key: Leave blank
$ slc loopback:relation
? Select the model to create the relationship from:
...
> Customer
... # follow the prompts, repeat for other models

Some relations are not available in slc, please add them in model-name.json manually. LoopBack automatically derives relation and foreign key names when you leave the values empty.

Try the API

Start the application with node . and browse to [localhost:3000][localhost]. You should see various links. Each endpoint is defined as follows:

hasMany

embedsOne

embedsMany

referencesMany

polymorphic embedsMany

More LoopBack examples

Tags: example_app