filtering json data and displaying results in table

Question

I am asking for user input and based on their input value i will return a json object. I would like to take the returned object and display a few items from the object in a table for the user to see. I am not sure if the way i am doing this could be more clean or as straight forward.

here is what i have so far:

in html file:

<form>
     <input type="text"  id="searchValue" required>
     <input type="button" value="Submit" 
      onclick="getData(document.getElementById('searchValue').value)">
</form>

in my js file:

function getData(userInput) {
    return $.getJSON('url/info' + userInput);
}
$(function() {
    getData().done(function(json) {
       //what do i need to do here so that the contents of this object will be available in the html file.
    });
});

the returned object looks something like:

classrooms: Array[2]
  0: Object
    className: "math",
    startDate: "1/1/2016"
    .....
  1: Object
    .......
    .......

I would like to take the returned info and display in a table format that will be visible upon the return of results:

<table id="classesOffered" class="hidden">
    <tr>
        <th>Class Name</th>
        <th>Start date)</th>
        <th>Something else</th>
    </tr>
</table>

Answer 1

Assuming the data that comes back as an object, you can do something like this. If it is a json string, you will need to parse it before doing the forEach() .

function getData(userInput) {
    return $.getJSON('url/info' + userInput);
}
$(function() {
    getData().done(function(json) {
       var table = $('#classesOffered');
       json.forEach(function(class) {
         table.append(
           '<tr>' +
             '<th>' + class.className + '</th>' +
             '<th>' + class.startDate + '</th>' +
             '<th>' + class.somethingElse + '</th>' +
           '</tr>'
         );
       });

    });
});