V1
V1

Data Binding

Setting up a connection to the data source is the first step in binding data to the report. Data source can be a local JSON file or a remote data. Once a connection is established, a dataset is required to get the data you want to show on the report.

DataSources

The ActiveReportsJS supports binding to JSON data source. You can directly use JSON web services to connect to a JSON datasource, for example

Or you can use local JSON files - the json file must be in the same folder or subfolder as report, since only relative paths to data files are supported. Multiple data sources can also be added in a single report.

Add JSON data


Follow the steps given below to bind to a json data source.

  1. From the Data tab, click Add corresponding to Data Sources.

  2. In the New Data Source dialog that opens, you can either:
    • embed the data source:
          ◦ Set Embedded field to True.
          ◦ In Embedded Content field, click 'Load from file' and navigate to a valid json file.
    • provide URI: In Content URI field:
          ◦ to connect to JSON web service, paste the web service URL. The generated connection string looks like: jsondoc=http://northwind.netcore.io/customers?format=json.
          ◦ to connect to a local json file, click 'Open file' and navigate to a valid json file. The generated connection string looks like: jsondoc=ProductInfo.json.

  3. Click Add Data Source.

Datasets

A dataset fetches data from the data source to display in a report.

Add Dataset


Follow these steps to add a dataset.

  1. Click the Add Data set next to the data source for which you want the dataset.
  2. Enter the Name of the dataset.
  3. Enter a query in the Query field. For example, $.[*] or $.customers[*]. See this link for the supported JSONPath query language.
  4. Click Validate to validate the query.
    Fields are populated in the Bound Fields for a valid data source and query. You can also set filters on dataset.
  5. Click OK to close the dialog. The added dataset and queried fields appear in the Data tab of the designer.