using links to fill select options using jquery

by srikar7

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!-- Visualize: Use links as data  (5.6)
  -->
    <script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type='text/javascript' src="http://localhost:8081/jasperserver-pro/client/visualize.js"></script>

<select id="selectCity"></select>
<button id="previousPage">Previous Page</button>
<button id="nextPage">Next Page</button>
<div>
  <div style="width:20px;"></div>
  <div style="width:500px;" id="main"></div>
</div>

CSS

#main {
  float: left;
}

#drill-down {
  float: right;
}

JavaScript

// Visualize: Use links as data  (5.6)

// NOTE: This Fiddle is using a non-standard demo report source:
//       (/public/viz/Hyperlinks/Drill_Reports_with_Controls/main_report).

visualize({
  auth: {
    name: "superuser",
    password: "superuser"

  }
}, function(v) {

  var $select = $("#selectCity"),
    report = v.report({
      resource: "/public/Samples/Reports/AccountList",
      container: "#main",
      success: refreshSelect,
      error: showError
    });

  function refreshSelect(data) {
    console.log(data);
    opt = data.links;
    var o4 = $.grep(opt, function(obj) {
      return obj.tooltip !== undefined;
    });
    console.log("jwuer:", o4);
    var options = o4.reduce(function(memo, link) {


      return memo + "<option>" + link.tooltip + "</option>";
    }, "");
    $select.html(options);
  }

  $("#previousPage").click(function() {
    var currentPage = report.pages() || 1;
    goToPage(--currentPage);
  });

  $("#nextPage").click(function() {
    var currentPage = report.pages() || 1;
    goToPage(++currentPage);
  });

  function goToPage(numder) {
    report
      .pages(numder)
      .run()
      .done(refreshSelect)
      .fail(showError);
  }

  function showError(err) {
    alert(err.message);
  }

});