過濾json數據並在表

中顯示結果我要求用戶輸入並根據它們的輸入值我將返回一個json對象。我想要返回的對象，並顯示錶中的對象的幾個項目，供用戶查看。我不知道我做這件事的方式是否可以更乾淨或直截了當。過濾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 
    ....... 
    .......

我wou LD喜歡拿回來的信息和顯示，這將是在返回結果可見表格式：

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

來源

2016-11-02 bluePearl

假設回來作爲一個對象的數據，你可以做這樣的事情。如果它是一個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>' 
     ); 
     }); 

    }); 
});

來源

2016-11-02 13:12:28 Gavin

所以我只是嘗試這樣做 - 首先我得到了'forEach'不是一個功能，所以我改變了'json'到'[]'，現在當我渲染頁面我沒有得到一個錯誤，但錯誤我也沒有看到我的表與結果。不知道如何調試這個， – bluePearl

'console.log（json）'會有幫助。就像我說的，如果它是一個字符串，那麼在使用'forEach（）'之前，你必須解析數據。雖然，你確實聲明'返回的對象'是一個數組，肯定有一個'forEach'函數。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach – Gavin

如果它是一個字符串，'JSON.parse（json）'就是你要找的東西。 – Gavin

過濾json數據並在表

回答

相關問題