dimanche 21 juin 2020

get data in if conditions (AND) with javascript?

I have some problems with the if condition, I have checkbox filters, if I checked "Type" it displays the result but when I clicked "Type" and "Duration" it's not displaying anything.

I want if I click one category or more, it should display data according to the checkbox that was checked checked.

Code:

$('.checkbox input').change(function() {

                var selectedFilters = [];
                $.each($(".checkbox input:checked"), function() {
                    selectedFilters.push($(this).val());
                });

                console.log(selectedFilters);
                $('#video-result').html("");

                $.getJSON(root + "/assets/js/data-video.json", function(data) {
                    $.each(data, function(key, value) {
                        var grid = "";

                        if (value.type.search(selectedFilters) != -1 && value.duration.search(selectedFilters) != -1 && value.difficulty.search(selectedFilters) != -1 && value.subtitle.search(selectedFilters) != -1 && value.music.search(selectedFilters) != -1) {
                            grid += '<div class="grid">' +
                                '<div class="card card-video">' +
                                '<div class="row">' +
                                '<div class="col-12">' +
                                '<div class="video-thumbnail" style="background: url(' + value.image + '); background-size:cover; background-position:center; background-repeat:no-repeat;">' +
                                '<div class="noted">' +
                                '<div class="time">28:36</div>' +
                                '<div class="category">' + value.type + '</div>' +
                                '</div>' +
                                '<div class="user-img">' +
                                '<div class="image" style="background: url(' + value.users + '); background-size:cover; background-position:center; background-repeat:no-repeat;"></div></div>' +
                                '</div>' +
                                '</div>' +
                                '<div class="col-12">' +
                                '<div class="description">' +
                                '<div class="name">' +
                                '<p>' + value.name + '</p>' +
                                '</div>' +
                                '<div class="title">' + value.title + '</div>' +
                                '<div class="statistic subtitle d-flex">' +
                                '<p>Views 132k</p>' +
                                '<p>2 Days Ago</p>' +
                                '</div>' +
                                '</div>' +
                                '</div>' +
                                '</div>' +
                                '</div>' +
                                '</div>';
                        }
                        $('#video-result').hide().append(grid).fadeIn();
                    });
                });
            });

enter image description here

enter image description here

Aucun commentaire:

Enregistrer un commentaire