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

Question

到目前为止，我可以查看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>

我得到了以下结果：

在此输入图像描述

在chrome中，我甚至无法看到它

Answer 1

我得到的反应是一个对象而不是一个数组。 将响应作为对象处理。

 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); myList = JSON.parse(myList); console.log(myList); var keys = []; for (var key in myList) { keys.push(key); } addAllColumnHeaders(myList, keys); var row$ = $('<tr/>'); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var cellValue = myList[key]; if (cellValue == null) { cellValue = ""; } else if (typeof cellValue == "object") { cellValue = JSON.stringify(cellValue); } row$.append($('<td/>').html(cellValue)); } $("#excelDataTable").append(row$); }); } function addAllColumnHeaders(myList, keys) { var columnSet = []; var headerTr$ = $('<tr/>'); for (var i = 0; i < keys.length; i++) { var key = keys[i]; headerTr$.append($('<th/>').html(key)); } $("#excelDataTable").append(headerTr$); return columnSet; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-06-24 21:38:22

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-06-24 21:38:22

解决方案1
1 已采纳 2015-06-24 21:38:22