Documentation menu
JS React Angular Vue
JS React Angular Vue

Connecting to JSON

After formatting your JSON data and setting data types for fields, you can start connecting to the data.

Connect to JSON via UI

Step 1. Go to the Connect tab (
menu_connect ) on the Toolbar.

Step 2. Choose the JSON you want to connect to:

  • Local JSON. Use this option to load a file from your local file system.
  • Remote JSON. Use this option to load a remote JSON file by its URL or data returned by a server-side script.

Connect to JSON programmatically

There are two ways to connect to JSON programmatically:

1) To connect to inline JSON data in the report, use the dataSource.data property:

import React from "react";
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

export default function App() {
  const reportJson = {
    dataSource: {
      data: [
        {
          "Product": "Apple",
          "Price": 2.50
        },
        {
          "Product": "Cherry",
          "Price": 5.25
        }
      ]
    }
  };

  return (
    <div>
      <WebDataRocksReact.Pivot 
        toolbar={true} 
        report={reportJson}
      />
    </div>
  );
}

2) If your JSON data is in a file or is returned by a server-side script, specify the URL in the dataSource.filename property:

import React from "react";
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

export default function App() {
  const reportJson = {
    dataSource: {
      filename: "URL-to-your-JSON-file"
    }
  };

  return (
    <div>
      <WebDataRocksReact.Pivot
        toolbar={true} 
        report={reportJson}
      />
    </div>
  );
}

Set a JSON data source for all reports

To set a JSON data source for all reports, specify it in the Global Object:

import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks"

@Component({
  selector: "app-root",
  standalone: true,
  imports: [WebdatarocksPivotModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  globalReportJson = {
    dataSource: {
      type: "json",
      filename: "URL-to-your-JSON-file"
    }
  };

  reportJson = {
    // Your report
  };
}
<app-wbr-pivot
 [toolbar]="true"
 [global]="globalReportJson"
 [report]="reportJson">
</app-wbr-pivot>
import React from "react";
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

export default function App() {
  const globalReportJson = {
    dataSource: {
      type: "json",
      filename: "URL-to-your-JSON-file"
    }
  };

  const reportJson = {
    // Your report
  };

  return (
    <div>
      <WebDataRocksReact.Pivot 
        toolbar={true}
        global={globalReportJson}
        report={reportJson}
      />
    </div>
  );
}

See also