# Loading reports as JSON resources

Learn how to load a report as the JSON resource

## Content

Suppose you plan to keep report templates on the server-side and fetch them at runtime on demand. ActiveReportsJS uses [JSON format](https://www.json.org/json-en.html) and the `rdlx-json` extension for report template files. Therefore an application can fetch a report template like any other JSON resource. Once the template's JSON is delivered, you can pass it to the [viewer.open](https://developer.mescius.com/activereportsjs/api/classes/ReportViewer.Viewer#open) method. The following examples show the code of Angular, React, and Vue TypeScript components using the described approach. These examples assumed that the `/reports/Invoice` request returns the report template content. They also show how to modify a report before loading it into the Report Viewer.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Angular component
DOC-SUMMARY-TAG-CLOSE

```js
import { ViewerComponent } from "@mescius/activereportsjs-angular";
@Component({
  selector: "app-root",
  template:
    "<gc-activereports-viewer (init)='onViewerInit()'> </gc-activereports-viewer>",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild(ViewerComponent) reportViewer: ViewerComponent;
  onViewerInit() {
    fetch("/reports/Invoice")
      .then((data) => data.json())
      .then((report) => {
        report.Page.PageOrientation = "Landscape";
        this.report.open(report);
      });
  }
}
```

Check the [Angular Viewer Component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component) page for more information on how to integrate ActiveReportsJS viewer in an Angular application.
DOC-DETAILS-TAG-CLOSE
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
React component
DOC-SUMMARY-TAG-CLOSE

```js
import { Viewer } from "@mescius/activereportsjs-react";

function App() {
  const viewerRef = React.useRef();

  React.useEffect(() => {
    async function loadReport() {
      await fetch("/reports/Invoice")
        .then((data) => data.json())
        .then((report) => {
          report.Page.PageOrientation = "Landscape";
          viewerRef.current.Viewer.open(report);
        });
    }
    loadReport();
  }, []);
  return (
    <div id="viewer-host">
      <Viewer ref={viewerRef} />
    </div>
  );
}
```

Check the [React Viewer Component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/React-Component) page for more information on how to integrate ActiveReportsJS viewer in a React application.
DOC-DETAILS-TAG-CLOSE
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Vue component
DOC-SUMMARY-TAG-CLOSE

```js
import { Viewer as ReportViewer } from "@mescius/activereportsjs-vue";

new Vue({
  el: "#app",
  components: { "arjs-viewer": ReportViewer },
  template: "<arjs-viewer ref='reportViewer' />",
  mounted() {
    const viewer = this.$refs.reportViewer.Viewer();
    fetch("/reports/Invoice")
      .then((data) => data.json())
      .then((report) => {
        report.Page.PageOrientation = "Landscape";
        viewer.open(report);
      });
  },
});
```

Check the [Vue Viewer Component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Vue-Component) page for more information on how to integrate ActiveReportsJS viewer in a Vue application.
DOC-DETAILS-TAG-CLOSE
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
JavaScript component
DOC-SUMMARY-TAG-CLOSE

```js
var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host");
fetch("/reports/Invoice")
  .then((data) => data.json())
  .then((report) => {
    report.Page.PageOrientation = "Landscape";
    viewer.open(report);
  });
```

Check the [Pure JavaScript integration](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/VanillaJS) page for more information on how to integrate ActiveReportsJS viewer in a pure javascript application.
DOC-DETAILS-TAG-CLOSE
Visit the [Live Demo](/activereportsjs/demos/features/viewer-report-loading) for the complete code examples.