What is the best way to send multiple arrays of JSON objects to a Stimulsoft report using JavaScript?

I am currently working with this JavaScript code snippet:

var viewer = new window.Stimulsoft.Viewer.StiViewer(
  null,
  "StiViewer",
  false
);

var report = new window.Stimulsoft.Report.StiReport();
const { data: reportData } = await GetRequestFromStore(
  this.state.reportDate,
  this.state.storeId
);

var json = {
  DataSet: reportData.requestItems,
};
var dataSet = new window.Stimulsoft.System.Data.DataSet("JSON");
dataSet.readJson(json);
report.regData("JSON", "JSON", dataSet);

report.loadFile(this.state.reportName);
report.dictionary.variables.getByName(
  "requestDate"
).valueObject = this.state.jalaaliReportDate;

viewer.report = report;

viewer.renderHtml("viewer");

In addition, I have designed the data source in Stimulsoft designer using the following link:

https://i.sstatic.net/TZCqz.jpg

Everything is functioning as expected. However, I am now seeking a way to pass multiple JSON object arrays (such as Items and Descriptions) to the report within the code.

https://i.sstatic.net/zXs5a.jpg

If you have any insights on how to achieve this, I would greatly appreciate it. Thank you!

javascriptstimulsoft

Answer №1

Finding Solutions with DataSet really helped me out. Combining two JSON object arrays into one and then registering the dataset resolved my issue.

Now, the structure of reportData is:

let reportData = {
  items: [],
  descriptions: [],
};

https://i.sstatic.net/Q0ED3.jpg

In the Stimulsoft designer tool, the dataSet design looks like:

https://i.sstatic.net/5wlk1.jpg

This specific part of the code was the key for me to make it work.

var viewer = new window.Stimulsoft.Viewer.StiViewer(null, "Viewer", false);

var report = new window.Stimulsoft.Report.StiReport();
const { data: reportData } = await GetRequestFromStore(
  this.state.reportDate,
  this.state.storeId
);

var dataSet = new window.Stimulsoft.System.Data.DataSet("DS1");
dataSet.readJson(JSON.stringify(reportData)); // Merging into one JSON object

// Adding this line of code as well
report.dictionary.databases.clear();
report.regData("DS1", "DS1", dataSet);

// Also needing this line of code
report.dictionary.synchronize();

report.loadFile(this.state.reportName);
report.dictionary.variables.getByName(
  "requestDate"
).valueObject = this.state.jalaaliReportDate;

viewer.report = report;

viewer.renderHtml("viewer");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Jquery .change() function refreshes the results just once

I am working on a form with 3 input fields named #first, #second, and #third, along with a fourth field labeled as #theResult. <div id="addFields"> <span id="addFieldsHeader">Add The Fields</span> <table style="margin:0 auto;"> ...

javascriptjquery

Contrast objects and incorporate elements that are different

In my scenario, I have a list of days where employees are scheduled to work. However, on the website, I need to display the remaining days as leave. In cases where an employee has two different shifts, there can be two elements in the object. var WorkDays ...

javascript

What is the reason behind the browser permitting cross-origin POST requests but not PUT requests?

Let's consider a straightforward example of utilizing the XMLHttpRequest. The following code snippet functions correctly (you can verify in the network tab or by navigating your browser to http://requestb.in/yckncpyc) despite displaying a warning in ...

javascriptajaxbrowsercross-browser

The passing of React parent component props to the child component is not functioning as expected

Retrieving data through an ajax call and saving it to the state of the component _fetchDataFromServer(){ reqwest({ url: 'http://127.0.0.1:8000/api/example/' , type: 'json' , method: 'get' , contentType: &ap ...

javascriptreactjsreactive-programming

Is it possible to configure node js to send an array instead of a string?

How can I modify the code to return a 2D array of the results? For example: clothes = [[1, "name", "desc"], [2, "name2", "desc2]] Can the 'res' variable send a list directly or do I need to create a list after returning it? app.get('/post&ap ...

javascriptnode.jsresponse

run a function once ngFor has completed rendering the data

I'm attempting to run a function every time my ngFor finishes loading data from the API. However, the callback only works on the initial load of the ngFor. How can I make sure that the callback is executed whenever my ngFor data changes? I found a ...

javascriptangularngfor

Encountering an undefined variable in the .env file

Once the .env file was created in the main React folder REACT_APP_API_KEY=gzomlK5CKLiaIWS.... I also installed the .env NPM library Despite this, I continued to receive undefined in the API file. What could be causing this issue? import React, { useState ...

javascriptreactjsenvironment-variables

Steps for resetting the counter to 0 following an Ajax Refresh or Submission to the database

I have been working on a code that successfully sends multiple data to a MySQL Database using JQuery Ajax. Everything works smoothly, but I encountered an issue when trying to refresh the page with ajax and add a new record; it populates the number of time ...

javascriptphpjquerymysqlajax

How to implement a form in PHP that doesn't refresh the page upon submission

I am having an issue with this ajax code. I know it works, but for some reason it's not submitting. <script type="text/javascript"> $(function(){ $('input[type=submit]').click(function(){ $.ajax({ type: "POST", ...

javascriptphpjqueryajaxforms

Node.js & Express: Bizarre file routes

It's quite strange how my local paths are functioning. Let me show you an example of my directory structure: public > css > bootstrap.css public > js > bootstrap.js templates > layout > page.ejs (default template for any page) tem ...

javascriptnode.jsexpress

Setting a date in Angular Material 2 without closing the mdMenu

I am trying to interact with Material 2's menu. Is there a way to select a menu item without closing the menu popup? Check out this link for more information. ...

javascriptangularangular-material

With TypeScript, you have the flexibility to specify any data type in the generic types when using the axios.get method

axios.get('/api') When working with TypeScript as shown above, it is important to designate types for better clarity. This allows us to reference the type definition of axios, like so: (method) AxiosInstance.get<any, AxiosResponse<any> ...

javascripttypescriptaxiostypescript-generics

Generate an array of identifiers from a pre-existing array

I am facing a challenge where I need to create an array of IDs for each element in an existing array whose size is unknown. The twist here is that every set of four elements should have the same ID. As an illustration, if the original array (let's ca ...

javascriptarraystypescript

Comparison Between React-Redux mapStateToProps and Inheriting Props from ParentsIn the

Excuse my lack of experience, but I am currently delving into the world of react-redux and trying to grasp the concepts as I progress. Situation: In my main component within a react-redux application, I have the following snippet at the end: function map ...

javascriptreactjsreduxreact-redux

Ensuring child input components are validated upon submission using Vee-Validate and Vue.js 2

Currently, I am working on creating a Registration form with multiple "Input Field" components that require validation once the Submit button is pressed. While each input field validates individually when the text is changed, I am struggling to implement a ...

javascriptformsvalidationvue.jscomponents

The IISNode website displays directory contents instead of launching the server.js file

Having trouble configuring IISNode to automatically serve the main server.js application file for my node application. Currently, when I navigate to http://localhost:80/ where my app is hosted, it just displays the folder contents instead of running the se ...

javascriptnode.jsiisiisnode

React Native tutorial: Changing button color on press

When a user clicks on the TouchableOpacity element, I want to change the color of the button from the default gray to blue. Initially, the 'checked={this.state.newProjects}' newProjects variable is not present in the state, so when clicked it sho ...

javascriptcssreactjsreact-native

Error: The function $.get is not recognized when using jQuery with babel-node

Currently, I am executing the code below from a test.js file using babel-node in the command line: babel-node test.js installation of jquery npm i --save jquery test.js: import $ from 'jquery'; $.get("www.google.com"); Upon execution, I en ...

javascriptjquerycommand-lineecmascript-6babeljs

What is the most efficient way to use map-reduce in TypeScript to filter a list based on the maximum value of an attribute?

Recently, I came across a list that looked something like this: let scores = [{name: "A", skills: 50, result: 80}, {name: "B", skills: 40, result: 90}, {name: "C", skills: 60, result: 60}, {name: "D", skills: 60, ...

javascriptangulartypescript

Having trouble with the filtering feature in Material UI Datagrid

I'm currently using Material UI Data Grid to display a table on my website. The grid has an additional filter for each column, but when I click on the filter, it hides behind my Bootstrap Modal. Is there a way to bring it to the front? https://i.stac ...

javascriptcssreactjsdatagridmaterial-ui