如何使用Ajax和jquery的复选框过滤Json对象？

时间：2019-07-02 13:32:00

标签： javascript jquery json ajax

我是这里的新手，也是我关于堆栈溢出的第一个问题，我正在尝试通过使用jQuery和AJAX对复选框值进行过滤来获取JSON对象。例如，如果我单击陈列室销售，它将返回给我进行陈列室销售的所有对象价值。

<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 :(得分：0)

我必须使用array filter method：

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>");
        });

    });
});
相关问题
最新问题