Edit in JSFiddle

// Visualize: Get input controls data  (5.6)

visualize({   
    auth: {
        name: "superuser",
        password: "superuser"
    }
},function(v) {
    
    v.inputControls({
        resource: "/public/Samples/Reports/03._Store_Segment_Performance_Report",
        success: function (controls) {
            controls.forEach(buildControl);
        },
        error: function (err) {
            alert(err);
        }
    });
    
    function buildControl(control) {

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

        var template = "<label>{label}</label><select>{options}</select><br>",
            content = template.replace("{label}", control.label)
                .replace("{options}", buildOptions(control.state.options));

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

<!-- Visualize: Get input controls data  (5.6)
  -->

<!--Provide URL to visualize.js-->
<script type='text/javascript' src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<script type='text/javascript' src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!--Provide container to render your visualization-->
<div id="container"></div>