Как фильтровать объекты Json с помощью флажков, используя Ajax и JQuery? - PullRequest
0 голосов
/ 02 июля 2019

Я новичок здесь и мой первый вопрос о переполнении стека. Я работаю, пытаясь получить объект JSON путем фильтрации по значению флажка с помощью jQuery и AJAX.Например, если я щелкну по продажам в демонстрационном зале, он вернет мне все значения объекта, которые связаны с продажами в демонстрационном зале.

<div id="checkbox_div">
    <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 id="container"></ol>

, а вот мои значения jquery и json.Пожалуйста, кто-нибудь, помогите мне разобраться с этой проблемой.я буду очень надеюсь на тебя.пожалуйста

$('checkbox_div input').click(function(){
    var serv_val = $(this).val();
    $.getJSON( "petromin.json", function(data) { 
        $.each(data, function(key, value) { 
            $("ol").append("<li>" + value.services_list + "</li>");
        });

    });
});

  [
{
  "showroomname": "karama",
  "showroomphone" : "920023345",
  "showroomdistance" : "4m",
  "showroomservices": ["Showroom Sales", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Dubai"
},
{
  "showroomname": "financial center",
  "showroomphone" : "920023345",
  "showroomdistance" : "44.3 m",
  "showroomservices": ["Showroom Sales", "Service Centre", "Spare Parts" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Dubai"
},
{
  "showroomname": "downtown",
  "showroomphone" : "920023345",
  "showroomdistance" : "213.6 m",
  "showroomservices": ["Showroom Sales", "Service Centre", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Dubai"
},
{
  "showroomname": "jumierah",
  "showroomphone" : "920023345",
  "showroomdistance" : "100 m",
  "showroomservices": ["Service Centre", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Dubai"
},
{
  "showroomname": "Al Qouz",
  "showroomphone" : "920023345",
  "showroomdistance" : "213.6 m",
  "showroomservices": ["Showroom Sales", "Service Centre", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Dubai"
},
{
  "showroomname": "Al Barsha",
  "showroomphone" : "920023345",
  "showroomdistance" : "213.6 m",
  "showroomservices": ["Showroom Sales", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Dubai"
},
{
  "showroomname": "Al Masaood Automobiles - Nissan, Infiniti Showroom",
  "showroomphone" : "920023345",
  "showroomdistance" : "44.3 m",
  "showroomservices": ["Showroom Sales", "Service Centre", "Spare Parts" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Abu Dhabi"
},
{
  "showroomname": "FLEET SHOWROOM",
  "showroomphone" : "920023345",
  "showroomdistance" : "213.6 m",
  "showroomservices": ["Showroom Sales", "Service Centre", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Abu Dhabi"
},
{
  "showroomname": "INFINITI",
  "showroomphone" : "920023345",
  "showroomdistance" : "100 m",
  "showroomservices": ["Service Centre", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Abu Dhabi"
},
{
  "showroomname": "Ford Showroom",
  "showroomphone" : "920023345",
  "showroomdistance" : "213.6 m",
  "showroomservices": ["Showroom Sales", "Service Centre", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Abu Dhabi"
},
{
  "showroomname": "Al Habtoor Motors Royal Car",
  "showroomphone" : "920023345",
  "showroomdistance" : "213.6 m",
  "showroomservices": ["Showroom Sales", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Abu Dhabi"
}

  ]

1 Ответ

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

Я должен использовать метод фильтра массива :

const arr = 
  [
{
  "showroomname": "karama",
  "showroomphone" : "920023345",
  "showroomdistance" : "4m",
  "showroomservices": ["Showroom Sales", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Dubai"
},
{
  "showroomname": "financial center",
  "showroomphone" : "920023345",
  "showroomdistance" : "44.3 m",
  "showroomservices": ["Showroom Sales", "Service Centre", "Spare Parts" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Dubai"
},
{
  "showroomname": "downtown",
  "showroomphone" : "920023345",
  "showroomdistance" : "213.6 m",
  "showroomservices": ["Showroom Sales", "Service Centre", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Dubai"
},
{
  "showroomname": "jumierah",
  "showroomphone" : "920023345",
  "showroomdistance" : "100 m",
  "showroomservices": ["Service Centre", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Dubai"
},
{
  "showroomname": "Al Qouz",
  "showroomphone" : "920023345",
  "showroomdistance" : "213.6 m",
  "showroomservices": ["Showroom Sales", "Service Centre", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Dubai"
},
{
  "showroomname": "Al Barsha",
  "showroomphone" : "920023345",
  "showroomdistance" : "213.6 m",
  "showroomservices": ["Showroom Sales", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Dubai"
},
{
  "showroomname": "Al Masaood Automobiles - Nissan, Infiniti Showroom",
  "showroomphone" : "920023345",
  "showroomdistance" : "44.3 m",
  "showroomservices": ["Showroom Sales", "Service Centre", "Spare Parts" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Abu Dhabi"
},
{
  "showroomname": "FLEET SHOWROOM",
  "showroomphone" : "920023345",
  "showroomdistance" : "213.6 m",
  "showroomservices": ["Showroom Sales", "Service Centre", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Abu Dhabi"
},
{
  "showroomname": "INFINITI",
  "showroomphone" : "920023345",
  "showroomdistance" : "100 m",
  "showroomservices": ["Service Centre", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Abu Dhabi"
},
{
  "showroomname": "Ford Showroom",
  "showroomphone" : "920023345",
  "showroomdistance" : "213.6 m",
  "showroomservices": ["Showroom Sales", "Service Centre", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Abu Dhabi"
},
{
  "showroomname": "Al Habtoor Motors Royal Car",
  "showroomphone" : "920023345",
  "showroomdistance" : "213.6 m",
  "showroomservices": ["Showroom Sales", "Spare Parts", "Quick Service" ],
  "showroomemail" : "info@hafiz.com",
  "showroomdirection" : "https://www.google.com/maps/dir//21.368971,39.801534",
  "statename" : "Abu Dhabi"
}];


$('#checkbox_div input').on('change', function(){
    var serv_val = $(this).val().toLowerCase();
		const filteredValues = arr.filter(el => {
			return el.showroomservices.map(elem => elem.toLowerCase()).indexOf(serv_val) !== -1;
		});
		console.log(filteredValues);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkbox_div">
    <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 id="container"></ol>

РЕДАКТИРОВАТЬ:

$('checkbox_div input').click(function(){
    var serv_val = $(this).val();
    $.getJSON( "petromin.json", function(data) { 

const filteredValues = data.filter(el => {
                return el.showroomservices.map(elem => elem.toLowerCase()).indexOf(serv_val) !== -1;
            });
            console.log(filteredValues);


        filteredValues.forEach(function(obj) { 
            $("ol").append("<li>" + obj.showroomservices.join(', ') + "</li>");
        });

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