Skip to main content
Home  › ... Razor

JavaScript Tutorial

Tutorial HomeJavaScript
The samples can differ based on your Razor base class or if you're running an old version.
Selected: Typed (2sxc 16+) Switch to Dynamic (Razor14 or below)

Use the 2sxc JS API to get Data

This page uses the sxc data API to get data from the backend and display it in a table with JavaScript.

In this tutorial you'll learn how to:

  • Create a $2sxc object using the current Module Id
  • Use the correct data source using .data()
  • Read data using the .getOne(id) query method
  • Read data using the .getAll() query method

Look at the content below to see the effect.

Name Birthdate Poems
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

@* Make sure anonymous users have the 2sxc JS API *@
@Kit.Page.Activate("2sxc.JsCore")

<table id="example-content" class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Birthdate</th>
      <th>Poems</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

@* This tutorial uses turnOn, see turnOn tutorials *@
@Kit.Page.TurnOn("window.sxcDataTutorial200.init()", data: new {
  moduleId = MyContext.Module.Id
})

<script src="@App.Folder.Url/tutorials/js-data/js/get-data.js" @Kit.Page.AssetAttributes()></script>

Source Code of get-data.js

// Use an IFFE to ensure the variables are not exposed globaly
// See https://developer.mozilla.org/en-US/docs/Glossary/IIFE
(() => {
  // This is a more modern JS feature to deconstruct parameters
  // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
  function init({ moduleId }) {
    // Create a $2sxc object using the current Module Id
    const sxc = $2sxc(moduleId);

    // Get the data source using .data('xy')
    const poetsSvc = sxc.data('Poets');

    // Read data from the backend data source with the .getAll() query
    poetsSvc.getAll().then((poets) => {
      // pass poets to displayPoets
      displayPoets(poets);

      // Get data of first poet with .getOne(id) query and log it in the console
      poetsSvc.getOne(poets[0].Id).then((poet) => console.log(`Queried poet using .getOne(): ${poet}`));
    });
  }

  // Display example data in table
  function displayPoets(poets) {
    Array.prototype.forEach.call(poets.reverse(), (poet, poetIndex) => {
      // Make sure only 3 elements are shown
      if (poetIndex >= 3) return
      
      let tr = document.createElement('tr')
      
      addField(tr, poet.Name);
      addField(tr, new Date(poet.BirthDate).toLocaleDateString());
      addField(tr, poet.Poems);

      document.querySelector('#example-content > tbody').appendChild(tr)
    });
  }

  function addField(tr, text) {
    let td = document.createElement('td')
    td.innerText = text
    tr.appendChild(td)
  }

  // This tutorial uses turnOn, see turnOn tutorials
  const sDT = window.sxcDataTutorial200 = window.sxcDataTutorial200 || {};
  sDT.init = sDT.init || init;
})();

This page uses the sxc data API to get data from the backend and display it in a table with JavaScript.
In this tutorial you'll learn how to:

  • Create a $2sxc object using the current Module Id
  • Create a Query service using the .query(...).
  • Read data using getAll(), getStream(...) and getStreams(...)

Note that this sample will run the query RandomAuthorWithBooks. There are some things which you should know:

  1. The Query has permissions configured to allow viewers to use the query in JS.
  2. Each call returns a random author with his books, so sometimes the books-list may be empty

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

@* Make sure anonymous users have the 2sxc JS API *@
@Kit.Page.Activate("2sxc.JsCore")

<button id="mod-@MyContext.Module.Id-load-all" type="button" class="btn btn-primary">
  Get entire Query
</button>
<button id="mod-@MyContext.Module.Id-author" type="button" class="btn btn-primary">
  Get Stream <code>Author</code>
</button>
<button id="mod-@MyContext.Module.Id-streams" type="button" class="btn btn-primary">
  Get Streams <code>Author</code> and <code>Books</code>
</button>

@* This tutorial uses turnOn, see turnOn tutorials *@
@Kit.Page.TurnOn("window.tutQuery.init()", data: new {
  moduleId = MyContext.Module.Id
})

<script src="@App.Folder.Url/tutorials/js-data/js/query.js"></script>

Source Code of query.js

window.tutQuery = {
  querySvc: null,
  init: function({ moduleId }) {
    // Create a $2sxc object using the current Module Id
    const sxc = $2sxc(moduleId);
    this.querySvc = sxc.query('RandomAuthorWithBooks');

    // Attach click-handlers to button
    document.getElementById(`mod-${moduleId}-load-all`).onclick = () => this.getAll();
    document.getElementById(`mod-${moduleId}-author`).onclick = () => this.getAuthor();
    document.getElementById(`mod-${moduleId}-streams`).onclick = () => this.getStreams();
  },

  getAll: function() {
    this.querySvc.getAll().then(data => {
      console.log("Get All", data);
      alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
    });
  },

  getAuthor: function() {
    this.querySvc.getStream('Author').then(data => {
      console.log("Get Stream 'Author' only", data);
      alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
    });
  },

  getStreams: function() {
    this.querySvc.getStreams('Author,Books').then(data => {
      console.log("Get Streams 'Author' and 'Books'", data);
      alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
    });
  },
}

This page uses the sxc data API to query data from the backend using parameters and display it in a table with JavaScript.
In this tutorial you'll learn how to:

  • Create a $2sxc object using the current Module Id
  • Create a Query service using the .query(...).
  • Add Parameters to the .getAll(...), .getStream(...) and .getStreams(...) query methods through object or string

Note that this sample will run the query AuthorsWithBooks.

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

@* Make sure anonymous users have the 2sxc JS API *@
@Kit.Page.Activate("2sxc.JsCore")
@{ var btnPrefix = "mod-" + MyContext.Module.Id; }

<button id="@btnPrefix-object" type="button" class="btn btn-primary">
  Get Query with parameters (object)
</button>
<button id="@btnPrefix-string" type="button" class="btn btn-primary">
  Get Query with parameters (string)
</button>
<button id="@btnPrefix-stream-params" type="button" class="btn btn-primary">
  Get Query Stream with parameters
</button>
<button id="@btnPrefix-streams-params" type="button" class="btn btn-primary">
  Get Query Streams with parameters
</button>

@* This tutorial uses turnOn, see turnOn tutorials *@
@{
  var demoAuthorId = AsItem(MyData.GetStream("RandomAuthor")).Id;
  var data = new {
    moduleId = MyContext.Module.Id,
    demoAuthorId = demoAuthorId,
  };
}

@Kit.Page.TurnOn("window.tutQueryParameters.init()", data: data)

<script src="@App.Folder.Url/tutorials/js-data/js/query-parameters.js"></script>

Source Code of query-parameters.js

window.tutQueryParameters = {
  querySvc: null,
  demoAuthorId: 0,
  init: function({ moduleId, demoAuthorId }) {
    // Create a $2sxc object using the current Module Id
    const sxc = $2sxc(moduleId);
    this.querySvc = sxc.query('AuthorsWithBooks');
    this.demoAuthorId = demoAuthorId;

    // Attach click-handlers to button
    document.getElementById(`mod-${moduleId}-object`).onclick = () => this.queryWithObjectParams();
    document.getElementById(`mod-${moduleId}-string`).onclick = () => this.queryWithStringParams();
    document.getElementById(`mod-${moduleId}-stream-params`).onclick = () => this.queryStreamWithParams();
    document.getElementById(`mod-${moduleId}-streams-params`).onclick = () => this.queryStreamsWithParams();
  },

  queryWithObjectParams: function() {
    const queryParameters = {
      authorId: this.demoAuthorId,
      authorPageResults: 2,
      currentAuthorPage: 1
    };

    this.querySvc.getAll(queryParameters).then(data => {
      console.log("Get query with passing url parameters as object", data);
      alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
    });
  },

  queryWithStringParams: function() {
    // For passing parameters as a string it's important to use the default query string structure (key=value seperated by a &)
    // See: https://en.wikipedia.org/wiki/Query_string#Structure
    const stringWithParameters = `authorId=${this.demoAuthorId}&authorPageResults=2&currentAuthorPage=1`;

    this.querySvc.getAll(stringWithParameters).then(data => {
      console.log("Get query with passing url parameters as string", data);
      alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
    });
  },

  queryStreamWithParams: function() {
    const queryParameters = {
      authorId: this.demoAuthorId
    };

    this.querySvc.getStream('Current', queryParameters).then(data => {
      console.log("Get Query stream with passing url parameter", data);
      alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
    });
  },

  queryStreamsWithParams: function() {
    const queryParameters = {
      authorId: this.demoAuthorId,
      authorPageResults: 2,
      currentAuthorPage: 1
    };

    this.querySvc.getStreams('Current,AuthorsByPage', queryParameters).then(data => {
      console.log("Get query streams with passing url parameter", data);
      alert('Got all - see console for details. \n \n' + JSON.stringify(data, null, 2));
    });
  }
}

View Configuration

This is how this view would be configured for this sample.

  • Query: AuthorsWithBooks
Details for Query: AuthorsWithBooks