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
– react_or_angluar, Commented Jan 6, 2017 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 : stackoverflow.com/questions/5197207/… — Datacrawler
– Datacrawler, Commented Jan 6, 2017 at 16:22
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
– Heretic Monkey, Commented Jan 6, 2017 at 16:34
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 editing 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
– Heretic Monkey, Commented Jan 6, 2017 at 16:52

Felipe Nathan Campigoto · Accepted Answer · 2017-01-06 16:36:02Z

2

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

answered Jan 6, 2017 at 16:36

Felipe Nathan Campigoto

1015 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Datacrawler Over a year ago

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.

Felipe Nathan Campigoto Over a year ago

@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

Datacrawler Over a year ago

Are you talking about the MINMAX filter? I created a new question : stackoverflow.com/questions/41510656/…

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related