Skip to main content
Home  › ... Razor

JavaScript API Tutorials

Tutorial Home › JavaScript
Get Data from the Backend using JS
#2 Get a Query from the Backend using JS
Add Parameters to Query from the Backend using JS
Requirements
Resources
Related

Use the sxc query(...) API to get Queries in JS

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

Output

<button id="mod-@CmsContext.Module.Id-load-all" type="button" class="btn btn-primary">Get entire Query</button>
<button id="mod-@CmsContext.Module.Id-author" type="button" class="btn btn-primary">Get Stream <code>Author</code></button>
<button id="mod-@CmsContext.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 *@
@{
  var data = new {
    moduleId = CmsContext.Module.Id
  };
}
@Kit.Page.TurnOn("window.tutQuery.init()", data: data)

<script src="@CmsContext.View.Path/220-query.js"></script>

Source Code of 220-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));
    });
  },
}
Get Data from the Backend using JS
#2 Get a Query from the Backend using JS
Add Parameters to Query from the Backend using JS

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@using ToSic.Razor.Blade;
@inherits Custom.Hybrid.Razor14
@{
  // Tell the page that we need the 2sxc Js APIs
  Kit.Page.Activate("2sxc.JsCore"); 
}
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h2>Use the sxc <code>query(...)</code> API to get Queries in JS</h2>
      <p>
        This page uses the sxc data API to get data from the backend and display it in a table with JavaScript.
        <br>
        In this tutorial you'll learn how to:
      </p>

      <ul>
        <li>
          Create a $2sxc object using the current Module Id
        </li>
        <li>
          Create a Query service using the <code>.query(...)</code>.
        </li>
        <li>
          Read data using <code>getAll()</code>, <code>getStream(...)</code> and <code>getStreams(...)</code>
        </li>
      </ul>
      <p>
        Note that this sample will run the query <code>RandomAuthorWithBooks</code>. There are some things which you should know:
      </p>
      <ol>
        <li>The Query has permissions configured to allow viewers to use the query in JS. </li>
        <li>Each call returns a random author with his books, so sometimes the books-list may be empty</li>
      </ol>
    </div>
  </div>

  <button id="mod-@CmsContext.Module.Id-load-all" type="button" class="btn btn-primary">Get entire Query</button>
  <button id="mod-@CmsContext.Module.Id-author" type="button" class="btn btn-primary">Get Stream <code>Author</code></button>
  <button id="mod-@CmsContext.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 *@
  @{
    var data = new {
      moduleId = CmsContext.Module.Id
    };
  }
  @Kit.Page.TurnOn("window.tutQuery.init()", data: data)

  <script src="@CmsContext.View.Path/220-query.js"></script>



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })