Блог

Главная - Вопросы по программированию - Переключатель, который фильтрует через продукты javascript

Переключатель, который фильтрует через продукты javascript

#javascript #radio-button #filtering #product

#javascript #переключатель #фильтрация #продукт

Вопрос:

У меня есть длинный список продуктов data.json, которые я выбрал в js. Мне нужно создать переключатели, которые фильтруют показанные продукты, и я не уверен, как это сделать! Я выбрал данные, которые мне нужно отфильтровать, и сохранил их, я разделяю массивы, вот так: (это автомобили и транспортные средства)

 getData().then(data => {
            // Brands array      
            const brands = Object.values(data).map(({brand}) => brand);
            console.log(brands);
            // Model year
            const modelYears = Object.values(data).map(({model_year}) => model_year);
            console.log(modelYears);
            // Other datas...

Проблема в том, что у меня есть несколько автомобилей одного и того же года выпуска или одной и той же марки, мне нужно написать функцию, которая просматривает отмеченный переключатель кнопок и показывает все автомобили этой марки / этого года выпуска…

  <form id="brands">
            <p>MERKER:</p>
            <input type="radio" id="challenger" name="brand" value="challenger">
            <label for="challenger">Challenger</label><br>
            <input type="radio" id="euromobil" name="brand" value="euromobil">
            <label for="euromobil">Eura Mobil</label><br>
            <input type="radio" id="dethleffs" name="brand" value="dethleffs">
            <label for="dethleffs">Dethleffs</label><br>

Любой вклад или идея будут высоко оценены!

Комментарии:

1. Вы можете использовать array.prototype.filter()

Ответ №1:

Посмотрите на это:

  <!DOCTYPE html>
<html>
<body>

    <form id="brands">
        <p>MERKER:</p>
        <input type="radio" id="honda" name="brand" value="honda">
        <label for="honda">Honda</label><br>
        <input type="radio" id="toyota" name="brand" value="toyota">
        <label for="toyota">Toyota</label><br>
        <input type="radio" id="fiat" name="brand" value="fiat">
        <label for="fiat">Fiat</label><br>
    </form>
    <div id="results"></div>
<script>


  
var readTextFile = function(file, callback) {
    return new Promise( function (resolve, reject) {
        var rawFile = new XMLHttpRequest();
        rawFile.overrideMimeType("application/json");
        rawFile.open("GET", file, true);
         rawFile.onreadystatechange = function() {
            if (rawFile.readyState === 4 amp;amp; rawFile.status == "200") {
                 resolve (callback(rawFile.responseText));
            }
        }
        rawFile.send(null);
    });
}
    var brands = document.forms["brands"].elements["brand"];    
    var resultsDiv = document.getElementById('results');
    // Add event listener to each radio button
    function bind (data) {
        //console.log(data);
        for (let brand of brands){
            brand.addEventListener("click", function (){
                var resultsDiv = document.getElementById("results");
                resultsDiv.innerText ='';
                for (let item in data)
                {
                  // console.log( data[item].brand);
                    
                    if (brand.getAttribute('id') === data[item].brand)
                    {
                        console.log(data[item].model_year);
                        resultsDiv.innerText  = `brand : ${data[item].brand} 
                                                   model_year: ${data[item].model_year}  
                                                   price: ${data[item].price}n`;
                    }
                }
                
            });
         
        }
        
    };
    
     readTextFile("./cars.json", function(text){
        var data =   JSON.parse(text);
      
        return data;
        // return self.data;
         
    }).then(result => bind(result));

    
    
</script>

</body>
</html>

Связанный образец json в cars.json:

 {
    "car1"  : {"brand" : "fiat", "model_year": 2010, "price" : 33000   },
    "car2"  : {"brand" : "honda", "model_year": 2015, "price" : 120000   },
    "car3"  : {"brand" : "toyota", "model_year": 2012, "price" : 200000   },
    "car4"  : {"brand" : "fiat", "model_year": 2010, "price" : 33000   },
    "car5"  : {"brand" : "honda", "model_year": 2015, "price" : 120000   }

}
Метки: ,