Question

我是JS的初学者，不幸的是我不知道如何显示将由用户输入的内容过滤的信息。现在我有一个表格会显示JSON信息，但我希望像＃34;特朗普＆＃34;这样的字母或全名过滤，然后会显示一个结果表。如何将过滤后的结果组合成一个包含我的代码的表？

HTML

<form>
    <label for="name">Name:</label> 
    <input id='input' placeholder="President Name" type="text"> 
    <button onclick="loadPresidents()" type="button">Search for Presidents</button> <button type="button">Clear</button>
    <div id="presidentialTable"></div>
</form>

JS

function loadPresidents() {
"use strict";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        var data = this.responseText,
            jsonResponse = JSON.parse(data),
            table = document.createElement('table');

        table.setAttribute('class', 'history');
        var properties = ['number', 'name', 'date', 'took_office', 'left_office'];
        var capitalize = function (s) {
            return s.charAt(0).toUpperCase() + s.slice(1);
        };

        function filterResults() {
            var input = document.getElementById('input').value;
            var resultsFiltered = jsonResponse.filter(function(historicalData) {
                return historicalData.indexOf(input) != -1;
            });
            var result = ''; 

            resultsFiltered.map(function(a) {
                result += a + '<br/>';
            });
        }


        var tr = document.createElement('tr');
            for (var i = 0; i < properties.length; i++) {
                var th = document.createElement('th');
                th.appendChild(document.createTextNode(capitalize(properties[i])));
                tr.appendChild(th);
            }

            table.appendChild(tr);

            var tr, row;
            for (var r = 0; r < jsonResponse["presidents"].president.length; r++) { 
                tr = document.createElement('tr');
                row = jsonResponse["presidents"].president[r];
                for (var i = 0; i < properties.length; i++) {
                    var td = document.createElement('td');
                    td.appendChild(document.createTextNode(row[properties[i]]));
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }

            document.getElementById('presidentialTable').appendChild(table);
        }
    };
    xhttp.open("GET", "//Resources/USPresidents.json", true);
    xhttp.send();
}

Answer 1

重写代码如下 - https://jsfiddle.net/7gt2be1x/2/

function loadPresidents() {
    "use strict";
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var data = this.responseText,
                jsonResponse = JSON.parse(data),
                table = document.createElement('table');

            table.setAttribute('class', 'history');
            var properties = ['number', 'name', 'date', 'took_office', 'left_office'];
            var capitalize = function(s) {
                return s.charAt(0).toUpperCase() + s.slice(1);
            };

            function filterResults(data) {
                var input = document.getElementById('input').value;
                return data.filter(function(historicalData) {
                    return historicalData.name.toLowerCase().indexOf(input.toLowerCase()) != -1;
                });

            }


            var tr = document.createElement('tr');
            for (var i = 0; i < properties.length; i++) {
                var th = document.createElement('th');
                th.appendChild(document.createTextNode(capitalize(properties[i])));
                tr.appendChild(th);
            }

            table.appendChild(tr);

            var tr, row;
            var filtered = filterResults(jsonResponse["presidents"].president);
            for (var r = 0; r < filtered.length; r++) {
                tr = document.createElement('tr');
                row = filtered[r];
                for (var i = 0; i < properties.length; i++) {
                    var td = document.createElement('td');
                    td.appendChild(document.createTextNode(row[properties[i]]));
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }

            document.getElementById('presidentialTable').appendChild(table);
        }
    };
    xhttp.open("GET", "//schwartzcomputer.com/ICT4570/Resources/USPresidents.json", true);
    xhttp.send();
}

过滤用户输入以从XMLHttpRequest将JSON数据显示到表中？

1 个答案: