Блог

У меня есть задача, которую нужно выполнить в ближайшее время, я пытался разобраться в этом в течение последних нескольких дней, но, к сожалению, каждый раз терпел неудачу. Мне нужно создать фильтр, в котором пользователь может нажать на переключатель, чтобы получить эти конкретные курсы, после этого или даже раньше, он может нажать на флажки для дальнейшей фильтрации.

Мне удалось пройти «первую» часть фильтрации с помощью переключателей, самая большая проблема заключается в том, что я не могу фильтровать с помощью флажков, потому что, например, -> вы не можете выбрать 2 варианта из флажков.

Вот HTML

                     By subject:<br>
                    <form action="">
                            <input type="radio" name="name" value="Computing amp; IT">Computing amp; IT</input><br>
                            <input type="radio" name="name" value="Psychology amp; Sociology">Psychology amp; Sociology</input><br>
                            <input type="radio" name="name" value="Business amp; Management">Business amp; Management</input><br>
                            <input type="radio" name="name" value="Law amp; Criminology">Law amp; Criminology</input><br>
                            <input type="radio" name="name" value="Data Analytics">Data Analytics</input><br>
                            <input type="radio" name="name" value="Finance">Finance</input><br>
                            <input type="radio" name="name" value="Human Resource Management">Human Resource Management</input><br>
                            <!-- <input type="submit" value="Submit"> -->
                    </form>
                    <hr>
                    <h4> By Award:</h4>
                    <form action="">
                        <input type="checkbox" value="Postgraduate">Postgraduate</input><br>
                        <input type="checkbox" value="Undergraduate">Undergraduate</input><br>
                        <input type="checkbox" value="Top-Up">Top-Up</input><br>
                    </form>
 

а вот и JS

 fetch("https://api.myjson.com/bins/1axsrs")
.then(response => response.json())
.then(data =>  {
    let api_array = data.name;
    let radio = document.querySelectorAll('input[type=radio]');
    let checkboxes = document.querySelectorAll('input[type=checkbox]')
    api_array.map(item => {
        document.getElementById('app').innerHTML  =
        `<div class="card">
        <h6>${item.vertical}</h6>
        <h4>${item.program}</h4>
        <p>${item.level}</p>
        <button class="myButton">Enquire Now</button>
        `
    })
    for(let select of radio) {
        select.addEventListener('click',() => {
            document.getElementById('app').innerHTML = "";
            let api_array = data.name.filter(e => e.vertical === select.value)
            api_array.map(item => {
                document.getElementById('app').innerHTML  =
                `<div class="card">
                <h6>${item.vertical}</h6>
                <h4>${item.program}</h4>
                <p>${item.level}</p>
                <button class="myButton">Enquire Now</button>
                `
            })
            for(let check of checkboxes) {
                check.addEventListener('change',() => {
                    document.getElementById('app').innerHTML = "";
                    if(check.checked) {
                    let chosen = api_array.filter(c => c.level === check.value)
                    chosen.map(item => {
                        document.getElementById('app').innerHTML  =
                        `<div class="card">
                        <h6>${item.vertical}</h6>
                        <h4>${item.program}</h4>
                        <p>${item.level}</p>
                        <button class="myButton">Enquire Now</button>
                        `
                    })
                    } else {
                    }
                }) 
            }
        })
    }
})