Как я могу отфильтровать мой список услуг, если я сниму один из флажков сверху? - PullRequest
Новая
       15

Как я могу отфильтровать мой список услуг, если я сниму один из флажков сверху?

0 голосов
/ 07 июля 2019

Я работаю над небольшим проектом, и я новичок в javascript и json.Кто-нибудь может помочь мне разобраться с последним шагом.Я очень близок к тому, чтобы завершить это, но я столкнулся с некоторыми проблемами в этом.я хочу отфильтровать результаты, например, когда я проверяю Petromin, Showroom Sales and Service Center, они будут показывать свои результаты, и когда я снимаю отметку (например, petromin), он удаляет его значение из списка тех служб, где доступны его услуги, но если установлен какой-либо другой флажоквсе еще проверено, и его значение также внутри тех списков, где значение pertromin уже существует, поэтому его не следует удалять.

вот мой HTML-код 

<div id="checkbox_div">
    <label><input type="checkbox" value="Petromin">Petromin</label><br>
    <label><input type="checkbox" value="Used Cars">Used Cars</label><br>
    <label><input type="checkbox" value="Showroom Sales">Showroom Sales</label><br>
    <label><input type="checkbox" value="Service Center">Service Center</label><br>
    <label><input type="checkbox" value="Quick Service">Quick Service</label><br>
    <label><input type="checkbox" value="Spare Parts">Spare Parts</label>
</div>
<ol class="container"></ol>

, а вот мой код JavaScript 

<script type="text/javascript">
var data;
$('#checkbox_div input').click(function(){
    if ($(this).is(":checked")) {
        var serv_val = $(this).val().toLowerCase();
        $.getJSON( "petromin-en.json", function(jdata) { 
            data = Object.entries(jdata);
            const filteredValues = data.filter(el => {
                return el[1].services_list.map(elem => elem.toLowerCase()).indexOf(serv_val) !== -1;
            });
            //console.log(data);
            filteredValues.forEach(function(obj) {
                var showroom_val = obj[1].name;
                var text_same = showroom_val;
                $('.showroom_name').filter(function () {
                    return $(this).text() === text_same;
                }).parent().remove();
                $('ol.container').append(
                    "<div class='inner'><h3 class='showroom_name'>"
                         + showroom_val +  
                    "</h3><li class='serv_list'>" 
                        + obj[1].services_list.join(', ') +
                    "</li></div>"
                );
            });
        });
    }    
    else if ($(this).not(":checked")){
        var uncheck_val = $(this).val();
        //
    }
});

</script>

и вот мой код JSON 

`{    "PETR734": {
    "dealerId": "PETR734",
    "name": "Riyadh Exit -14",
    "latitude": "24.698386",
    "longitude": "46.773247",
    "state": "Central",
    "city": "RIYADH",
    "language": "en",
    "phoneidentifiers": "frontdesk",
    "phones": "920023345",
    "email": "info@petromin.com",
    "contactWebsite": "https://www.nissan-petromin.com/",
    "services": "PA;SRVC;QS;PRTS",
    "dealerType": "AC",
    "canAcceptLeads": "y",
    "spokenLanguages": "ar;en",
    "dealerDescription": "Service Center",
    "services_list": [
        "Petromin",
        "Service Center",
        "Quick Service",
        "Spare Parts"
    ]
},
"PETR759": {
    "dealerId": "PETR759",
    "name": "Riyadh Exit 13",
    "latitude": "24.700901",
    "longitude": "46.770143",
    "state": "Central",
    "city": "RIYADH",
    "language": "en",
    "phoneidentifiers": "frontdesk",
    "phones": "920023345",
    "email": "info@petromin.com",
    "contactWebsite": "https://www.nissan-petromin.com/",
    "services": "PA;SRVC;QS;PRTS",
    "dealerType": "AC",
    "canAcceptLeads": "y",
    "spokenLanguages": "ar;en",
    "dealerDescription": "Service Center",
    "services_list": [
        "Petromin",
        "Service Center",
        "Quick Service",
        "Spare Parts"
    ]
},
"PETR764": {
    "dealerId": "PETR764",
    "name": "Hofouf (TS)",
    "latitude": "25.406250",
    "longitude": "49.465344",
    "state": "Eastern",
    "city": "Hofuf",
    "language": "en",
    "phoneidentifiers": "frontdesk",
    "phones": "920023345",
    "email": "info@petromin.com",
    "contactWebsite": "https://www.nissan-petromin.com/",
    "services": "PA;SRVC;QS;PRTS",
    "dealerType": "AC",
    "canAcceptLeads": "y",
    "services_list": [
        "Petromin",
        "Service Center",
        "Quick Service",
        "Spare Parts"
    ]
},
"PETR763": {
    "dealerId": "PETR763",
    "name": "Khobar (TS)",
    "latitude": "26.256590",
    "longitude": "50.201419",
    "state": "Eastern",
    "city": "KHOBAR",
    "language": "en",
    "phoneidentifiers": "frontdesk",
    "phones": "920023345",
    "email": "info@petromin.com",
    "contactWebsite": "https://www.nissan-petromin.com/",
    "services": "PA;SRVC;QS;PRTS",
    "dealerType": "AC",
    "canAcceptLeads": "y",
    "spokenLanguages": "ar;en",
    "dealerDescription": "Service Center",
    "services_list": [
        "Petromin",
        "Service Center",
        "Quick Service",
        "Spare Parts"
    ]
},
"PETR765": {
    "dealerId": "PETR765",
    "name": "Qassim (TS)",
    "latitude": "26.294617",
    "longitude": "43.991607",
    "state": "Central",
    "city": "Qassim",
    "language": "en",
    "phoneidentifiers": "frontdesk",
    "phones": "920023345",
    "email": "info@petromin.com",
    "contactWebsite": "https://www.nissan-petromin.com/",
    "services": "PA;SRVC;QS;PRTS",
    "dealerType": "AC",
    "canAcceptLeads": "y",
    "services_list": [
        "Petromin",
        "Service Center",
        "Quick Service",
        "Spare Parts"
    ]
},
"PETR753": {
    "dealerId": "PETR753",
    "name": "Khobar Rashid Mall",
    "latitude": "26.299159",
    "longitude": "50.181901",
    "state": "Eastern",
    "city": "KHOBAR",
    "language": "en",
    "phoneidentifiers": "frontdesk",
    "phones": "920023345",
    "email": "info@petromin.com",
    "contactWebsite": "https://www.nissan-petromin.com/",
    "services": "PA;SRVC;QS;PRTS",
    "dealerType": "AC",
    "canAcceptLeads": "y",
    "spokenLanguages": "ar;en",
    "dealerDescription": "Service Center",
    "services_list": [
        "Petromin",
        "Service Center",
        "Quick Service",
        "Spare Parts"
    ]
},
"PETR752": {
    "dealerId": "PETR752",
    "name": "Dammam Rayan",
    "latitude": "26.411388",
    "longitude": "50.092705",
    "state": "Eastern",
    "city": "DAMMAM",
    "language": "en",
    "phoneidentifiers": "frontdesk",
    "phones": "920023345",
    "email": "info@petromin.com",
    "contactWebsite": "https://www.nissan-petromin.com/",
    "services": "PA;SRVC;QS;PRTS",
    "dealerType": "AC",
    "canAcceptLeads": "y",
    "spokenLanguages": "ar;en",
    "dealerDescription": "Service Center",
    "services_list": [
        "Petromin",
        "Service Center",
        "Quick Service",
        "Spare Parts"
    ]
},
"PETR762": {
    "dealerId": "PETR762",
    "name": "Dammam (TS)",
    "latitude": "26.441723",
    "longitude": "50.048123",
    "state": "Eastern",
    "city": "DAMMAM",
    "language": "en",
    "phoneidentifiers": "frontdesk",
    "phones": "920023345",
    "email": "info@petromin.com",
    "contactWebsite": "https://www.nissan-petromin.com/",
    "services": "PA;SRVC;QS;PRTS",
    "dealerType": "AC",
    "canAcceptLeads": "y",
    "services_list": [
        "Petromin",
        "Service Center",
        "Quick Service",
        "Spare Parts"
    ]
},
"PETR767": {
    "dealerId": "PETR767",
    "name": "Tabuk (TS)",
    "latitude": "28.438009",
    "longitude": "36.466928",
    "state": "Western",
    "city": "Tabuk",
    "language": "en",
    "phoneidentifiers": "frontdesk",
    "phones": "920023345",
    "email": "info@petromin.com",
    "contactWebsite": "https://www.nissan-petromin.com/",
    "services": "PA;SRVC;QS;PRTS",
    "dealerType": "AC",
    "canAcceptLeads": "y",
    "services_list": [
        "Petromin",
        "Service Center",
        "Quick Service",
        "Spare Parts"
    ]
},
"PETR758": {
    "dealerId": "PETR758",
    "name": "Riyadh Thumama",
    "latitude": "28.830702",
    "longitude": "46.730938",
    "state": "Central",
    "city": "RIYADH",
    "language": "en",
    "phoneidentifiers": "frontdesk",
    "phones": "920023345",
    "email": "info@petromin.com",
    "contactWebsite": "https://www.nissan-petromin.com/",
    "services": "PA;SRVC;QS;PRTS",
    "dealerType": "AC",
    "canAcceptLeads": "y",
    "spokenLanguages": "ar;en",
    "dealerDescription": "Service Center",
    "services_list": [
        "Petromin",
        "Service Center",
        "Quick Service",
        "Spare Parts"
    ]
}}`

1 Ответ

0 голосов
/ 07 июля 2019 
function displayData(filteredData){
    // wipe out the current dataset (to replace it with the new one). If filteredData.length === 0, then this will just clear the results.

    $('ol.container').html('');

    // put the newly found data into the container
    filteredData.forEach(location => {
        $('ol.container').append(
            `<div class='inner'>
                <h3 class='showroom_name'>${location.name}</h3>
                <li class='serv_list'>${location.services_list.join(', ')}</li>
            </div>`
        )
    })

}
function processData(){
    // get all checked checkboxes
    const checked = $('#checkbox_div input:checked');

    // iterate only the checked checkboxes
    checked.forEach(checkbox => {
        const currentService = checkbox.val().toLowerCase();
        const filteredData = jsondata.filter(location => location.services_list.includes(currentService));
        displayData(filteredData);
    })
}
$(function(){
    $('#checkbox_div input').click(function () {
        // All checkboxes do the same thing assuming that the data source is already available.
        // If not, then fetch the data first. This assumes that we have data in a global named jsondata.
        processData()
    });

})

Я сделал некоторые предположения о ваших данных здесь для целей именования.Этот код не проверен, но я думаю, что он передает идею.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...