JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

<div class="background">
  <div class="content">
<br>
<h4>Rendering select unit sales data from the first 7 rows of an ad hoc view.</h4>
<h5>(View all data in the console)</h5>

<!--Will render ad hoc view if container is specified in JS-->

<!--Do not need container to render data from ad hoc view-->
<!--<div id="container"></div>-->

  <div id="name1" class="nameData"></div>
  <div id="sale1" class="saleData"></div>

  <div id="name2" class="nameData"></div>
  <div id="sale2" class="saleData"></div>

  <div id="name3" class="nameData"></div>
  <div id="sale3" class="saleData"></div>

  <div id="name4" class="nameData"></div>
  <div id="sale4" class="saleData"></div>

  <div id="name5" class="nameData"></div>
  <div id="sale5" class="saleData"></div>

  <div id="name6" class="nameData"></div>
  <div id="sale6" class="saleData"></div>

  <div id="name7" class="nameData"></div>
  <div id="sale7" class="saleData"></div>
  <br><br>
  </div>
</div>

CSS

/*Disabled visualization selector*/
#container .jr-mAdhoc-visualization-launcher.jr {
  display: none;
}

.jr-isHidden {
  display: none;
}

.background {
  background-color: #E8E6DF;
  margin-top: -22px;
  margin-left: -10px;
  margin-right: -15px;
}

.content {
  margin-left: 25px;
}

.nameData {
  display: inline;
  font-size: 2em;
  color: #D96F35;
}

.saleData {
  margin-top: 8px;
  margin-bottom: 25px;
  margin-left: 145px;
  color: #514338;
  font-size: 2em;
  font-weight: bold;
}

JavaScript

visualize({
  auth: {
    name: "joeuser",
    password: "joeuser",
    organization: "organization_1"
  }
}, function(v) {
	var adv
  function renderView(uri) {
    adv = v.adhocView({
      resource: "/public/Samples/Ad_Hoc_Views/04__Product_Results_by_Store_Type",
      //uncomment here and in html to render ad hoc view on page
      //container: "#container",
      success: function() {
      	var data = adv.data()._dataset_internal_.levelDataNodes[0].all.children[0].group.children[0].detail;
      	var counts = adv.data()._dataset_internal_.counts;
        
        //render select ad hoc view data
				renderData(data, counts);

      },
      error: function(e) {
      	console.log(e);
    	},
    });
  }

  //render initial view
  renderView();
  
  function renderData(data, numRow) {
  	console.log("expand object to view data");
  	console.log(data);

    var numCol = 5;
    //Remove numRow limiter here if showing all rows.
    numRow = 7;
    var name = [];
    var sales = [];
    var selectedData = {};
    
    console.log("");
    console.log("data extracted with our loop");
    for (var col = 0; col < numCol; col++) {
    	for (var i = 0; i < numRow; i++) {
      
      	//show some selected data (columns) in the console
        selectedData.name = data.data[i][0];
        selectedData.unitSales = data.data[i][4];
        console.log(selectedData);
        
        //render some data on the page
        var nameID = ("name"+(i+1));
        var saleID = ("sale"+(i+1));
        document.getElementById(nameID).textContent=data.data[i][0];
        document.getElementById(saleID).textContent=data.data[i][4];
    	}
    }
	}
});