Question

我要求用户输入并根据他们的输入值我将返回一个json对象。我想获取返回的对象并在表中显示对象中的一些项目供用户查看。我不确定我这样做的方式是否更干净或更直接。

这是我到目前为止所拥有的：

在html文件中：

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

在我的js文件中：

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.
    });
});

返回的对象看起来像：

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

我想获取返回的信息并以返回结果时可见的表格格式显示：

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

Answer 1

假设作为对象返回的数据，您可以执行类似的操作。如果它是json字符串，则需要在执行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>'
         );
       });

    });
});

过滤json数据并在表格中显示结果

1 个答案: