在javascript中使用jquery为任何字段从json创建表_Javascript_Jquery_Json

在javascript中使用jquery为任何字段从json创建表

javascript jquery json

在javascript中使用jquery为任何字段从json创建表,javascript,jquery,json,Javascript,Jquery,Json,到目前为止，我可以查看json响应。现在我想把它们转换成表格。我使用以下代码来解析城市天气数据。我正在尝试使用以下代码 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> funct

到目前为止，我可以查看json响应。现在我想把它们转换成表格。我使用以下代码来解析城市天气数据。我正在尝试使用以下代码

    <!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        function goTo() {
            $.getJSON("http://api.openweathermap.org/data/2.5/weather?key=api&format=json&q=" + link_id.value, function(result, status, jqXHR) {
                    var myList = (jqXHR.responseText);
                    var columns = addAllColumnHeaders(myList);

                    for (var i = 0; i < myList.length; i++) {
                        var row$ = $('<tr/>');
                        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
                            var cellValue = myList[i][columns[colIndex]];

                            if (cellValue == null) {
                                cellValue = "";
                            }

                            row$.append($('<td/>').html(cellValue));
                        }
                        $("#excelDataTable").append(row$);
                    }
                }
            );}


        function addAllColumnHeaders(myList) {
            var columnSet = [];
            var headerTr$ = $('<tr/>');

            for (var i = 0; i < myList.length; i++) {
                var rowHash = myList[i];
                for (var key in rowHash) {
                    if ($.inArray(key, columnSet) == -1) {
                        columnSet.push(key);
                        headerTr$.append($('<th/>').html(key));
                    }
                }
            }
            $("#excelDataTable").append(headerTr$);

            return columnSet;
        }
    </script>
</head>

<body>

    <h2> Search box </h2>
    <input type='text' id='link_id'>
    <input type='button' id='link' value='Search' onClick='goTo()'>
    <table id="excelDataTable" border="1" />

    <div></div>

</body>

</html>


函数goTo（）{
$.getJSON（“http://api.openweathermap.org/data/2.5/weather?key=api&format=json&q=“+link_id.value，函数（结果、状态、jqXHR）{
var myList=（jqXHR.responseText）；
var columns=addAllColumnHeaders（myList）；
对于（变量i=0；i


我得到了以下结果：

而在chrome中，我甚至无法看到我得到的响应是一个对象而不是一个数组。将响应作为对象进行处理

函数goTo（）{
$.getJSON（“http://api.openweathermap.org/data/2.5/weather?key=api&format=json&q=“+link_id.value，函数（结果、状态、jqXHR）{
var myList=（jqXHR.responseText）；
myList=JSON.parse（myList）；
console.log（myList）；
var键=[]；
for（myList中的var键）{
按键。按（键）；
}
AddAllColumnHeader（myList，键）；
变量行$=$（''）；
对于（变量i=0；i


搜索框
首先将myList转换为json对象，如var jsonList=$.parseJSON（myList）；然后遍历对象并创建表格嗨，我更新了描述。我尝试了一段新代码。在这两种情况下，我都会遇到以下错误：ReferenceError:HTMLInputElement.onclick中未定义goTo(http://null.jsbin.com/runner:1:1874)
尝试将myList的值放在控制台中，查看如何接收JSON。json值完全不同。它们都是独一无二的价值观。试着从那里开始或者使用jquery插件，我发现了一些语法错误。我编辑了我的描述嗨，每次我运行一个新的查询，就会添加一个新的表。如何清除现有表？@DavidWalsh在addAllColumnHeaders之前使用$（“#excelDataTable”）.html（”）清除html；