#1 Get Data from the Backend using JS
Requirements
Use the sxc data API to get backend 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.
Output
Name | Birthdate | Poems |
---|
#1 Get Data 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 data API to get backend data</h2> <p>This page uses the sxc data API to get data from the backend and display it in a table with JavaScript.</p> <br> In this tutorial you'll learn how to: <ul> <li> Create a <code>$2sxc</code> object using the current Module Id </li> <li> Use the correct data source using <code>.data()</code> </li> <li> Read data using the <code>.getOne(id)</code> query method </li> <li> Read data using the <code>.getAll()</code> query method </li> </ul> <br> Look at the content below to see the effect. </div> </div> <table id="example-content" class="table"> <thead> <tr> <th>Name</th> <th>Birthdate</th> <th>Poems</th> </tr> </thead> <tbody></tbody> </table> @{ var data = new { moduleId = CmsContext.Module.Id }; } @Kit.Page.TurnOn("window.sxcDataTutorial200.init()", data: data) <script src="@App.Path/js/200-get-data.js" @Kit.Page.AssetAttributes()></script> @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })