Visualize: render one report

Test plugins

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Provide URL to visualize.js-->
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>

<div id="container"></div>

JavaScript

visualize({
  auth: {
    name: "superuser",
    password: "superuser"
  }
}, function(v) {

  //use input controls as service to get data from the server

  v.inputControls({
    resource: "/public/Samples/Reports/9g.CustomerDetailReport",
    success: function(controls) {
      controls.forEach(buildTable);
    },
    error: function(err) {
      alert(err);
    }
  });

  function buildTable(control) {

    function buildRows(options) {
      var template = "<tr><td>{value}</td></tr>";
      return options.reduce(function(memo, option) {
        return memo + template.replace("{value}", option.value);
      }, "")
    }

    var template = "<table class='table'>"+
    									"<thead><tr><td>{label}</td></tr></thead>" +
                      "<tbody{rows}</tbody>" + 
                      "</table>";
      content = template.replace("{label}", control.label)
      .replace("{rows}", buildRows(control.state.options));

    $("#container").append($(content));
  }

});