Adding data from JSON url using messes up with the queries (HTML table)

Question

A short description :

01) I dynamically load data from a JSON url into an HTML table. The script is in the external .js file called in the header of the HTML file.

02) I filter the results using a filter at the top of the page for the first column (NAME). The script works if I include it in the HTML file under the <script> tag but it does not work when I put all functions in an external .js file.

The link is shown here : LINK

And the JS script is here :

    //It loads the data from the JSON file 
$.getJSON(
     'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
     function(data){
         var tr;
//It loads data from the JSON file to the table
         $.each (data, function (key, val) {
            tr = $('<tr/>');
            tr.append('<td class="name" rel="' + val.first_name + '">' + val.first_name + '</td>');
            tr.append('<td >' + 'TEST' + '</td>');
            tr.append('<td class="metric2" >' + val.id + '</td>');
            tr.append('<td class="metric3"><span class="multTotal">' +'0.00'+ '</span></td>');
        tr.append('<td class="metric3-100"><span class="metric3-100">' +'0.00'+ '</span></td>');
        tr.append('<td class="metric1-100"><span class="metric1-100">' +'0.00'+ '</span></td>');
            $('table').append(tr);
         });
       });

//The filter function for the first column (NAME)
$("input:checkbox").click(function filters() {
    var showAll = true;
    $('tr').not('.first').hide();
    $('input[type=checkbox]').each(function () {
        if ($(this)[0].checked) {
            showAll = false;
            var dimension1= $(this).attr('rel');
            var value = $(this).val();            
            $('td.' + dimension1+ '[rel="' + value + '"]').parent('tr').show();
        }
    });
    if(showAll){
        $('tr').show();
    }
});

$('body').on('input', 'input:checkbox', filters);

I'm seeing this error Cannot read property 'aDataSort' of undefined — react_or_angluar, Jan 06 '17 at 16:20
@natel That refers to this line : `$("input:checkbox").click(function filters()` I had to add a name in the function which is a click function. I tried that but did not work : http://stackoverflow.com/questions/5197207/jquery-how-to-name-click-functions — Datacrawler, Jan 06 '17 at 16:22
I think this is the line the error occurs $('body').on('input', 'input:checkbox', filters); — react_or_angluar, Jan 06 '17 at 16:23
http://stackoverflow.com/questions/4643990/is-document-ready-necessary — react_or_angluar, Jan 06 '17 at 16:29
Move `function filters()` outside of the `click` and remove the `$("input:checkbox").click()` altogether. The change the line below to `$('body').on('input click', 'input:checkbox', filters);`. — Heretic Monkey, Jan 06 '17 at 16:34
@natel please check again. I altered the JS. For the NAME filter no errors shown but it does not work. — Datacrawler, Jan 06 '17 at 16:35
@MikeMcCaughan That worked! First part of the question answered. Can you have a go with the second one? — Datacrawler, Jan 06 '17 at 16:39
Nope! if you have two questions, ask two questions, not two in one question. @Felipe seems to have written the same answer as mine, albeit somewhat less concisely :). I would suggest [edit]ing your question to remove the second one, and ask a new question specifically amount this minmax filter. Do be sure to make it specific to that filter, what outputs you expect for what inputs, and where your attempt is not working. — Heretic Monkey, Jan 06 '17 at 16:52

score 2 · Accepted Answer · answered Jan 06 '17 at 16:36

About the filter function, you named this function inside the .click(function filter() { ... }); and after you're trying to use outside of ".click" in $('body').on('input', 'input:checkbox', filters);

I think you have to get do something like

function filters(){ ... };
$("input:checkbox").click( filters );
$('body').on('input', 'input:checkbox', filters);

or better, you don't need use the .click, just try to use like that way:

$('body').on('click', 'input:checkbox', function(){
    var showAll = true;
    $('tr').not('.first').hide();
    $('input[type=checkbox]').each(function () {
        if ($(this)[0].checked) {
            showAll = false;
            var dimension1= $(this).attr('rel');
            var value = $(this).val();            
            $('td.' + dimension1+ '[rel="' + value + '"]').parent('tr').show();
        }
    });
    if(showAll){
        $('tr').show();
    }
});

that way, you're attaching the click event on every input:checkbox that exists on body and will attach to the new inputs too

I got an answer in the comments. The first part of your post does not work. The second one should work fine. Now I am going for the second part of my question. The minmax filter. This is a bit more complex. — Datacrawler, Jan 06 '17 at 16:45
@ApoloRadomer, put yours head TR inside of "thead" tag, and when you'll fill the table, create a "tbody" tag and fill that tag with your data — Felipe Nathan Campigoto, Jan 06 '17 at 17:12
Are you talking about the MINMAX filter? I created a new question : http://stackoverflow.com/questions/41510656/adding-data-from-json-url-using-messes-up-with-a-query-html-table — Datacrawler, Jan 06 '17 at 17:36

Adding data from JSON url using messes up with the queries (HTML table)

1 Answers1