Filter user input to display JSON data into a table from XMLHttpRequest?

Question

I'm a beginner in JS and I'm unfortunately stuck on how to display the information that will be filtered by what a user puts in the input. Right now I have a table that will display the JSON info but I would like to filter like a letter or full name like "Trump", which will then will display a table of results. How would I combine the results that are filtered to make it into a table with the code I have?

The 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>

The 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();
}

what's the use of filterResults function if you never call it? — Jaromanda X
– Jaromanda X, Commented Aug 9, 2017 at 0:43
Ah! I forgot about calling functions, still learning about them. — logan26
– logan26, Commented Aug 9, 2017 at 2:27

Jaromanda X · Accepted Answer · 2017-08-09 00:56:46Z

Rewrite the code as follows - 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();
}

Collectives™ on Stack Overflow

Filter user input to display JSON data into a table from XMLHttpRequest?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related