Фильтр для select

25 марта 2021, 07:40

Получаю данные с сервера с помощью функции window.load:

window.load = function (onSuccess, onError) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'json';
    xhr.open('GET', URL);
    console.log(xhr.open('GET', URL));
    xhr.addEventListener('load', function () {
        if (xhr.status === SUCCESS) {
            window.data = xhr.response;
            onSuccess(xhr.response.slice(PINS_LIMIT));
        } else {
            onError(ERROR_SERVER);
        }
    });
    xhr.send();
    window.onSuccess = onSuccess(xhr.response.slice(PINS_LIMIT));
};

На основе данных, полученных с сервера мне нужно написать фильтр для select. Как это можно сделать на ванильном js? Моя неудачная попытка:

var housingType = document.getElementById('housing-type');
housingType.addEventListener('change', function (evt) {
  if (housingType.value.type === this.value) {
      return window.data.filter(function(it) {
          return it.typeHouse === this.value;
    });
  }
})

фильтр по value:

<option value="house">Дом</option>

json c сервера

author: {avatar: ""}
location: {x: 471, y: 545}
offer: {title: "", address: "", price: 30, type: "house", rooms: 1, …}

proto: Object

Answer 1

Если представленный JSON является значениями одного дома, то есть JSON для нескольких домой будет иметь вид:

data: [
    {
        author: {
            avatar: ""
        },
        location: {x: 471, y: 545},
        offer: {title: "Первый", address: "", price: 30, type: "house", rooms: 1}
    },
    {
        author: {
            avatar: ""
        },
        location: {x: 471, y: 545},
        offer: {title: "Второй", address: "", price: 30, type: "house", rooms: 2}
    },
    {
        author: {
            avatar: ""
        },
        location: {x: 471, y: 545},
        offer: {title: "Третий", address: "", price: 30, type: "notHouse", rooms: 3}
    }
]

то, можно сделать так (за место inputData подставляете свою переменную с данными соответственно). Данный пример сделан из тех данных которые Вы предоставили:

//Распарсили JSON и получаем объект 
var inputData = {data: [ 
	{ 
  	author: { 
    	avatar: "" 
    }, 
    location: {x: 471, y: 545}, 
    offer: {title: "Первый", address: "", price: 30, type: "house", rooms: 1} 
  }, 
  { 
  	author: { 
    	avatar: "" 
    }, 
    location: {x: 471, y: 545}, 
    offer: {title: "Второй", address: "", price: 30, type: "house", rooms: 2} 
  }, 
  { 
  	author: { 
    	avatar: "" 
    }, 
    location: {x: 471, y: 545}, 
    offer: {title: "Третий", address: "", price: 30, type: "notHouse", rooms: 3} 
  } 
]}; 
 
function showData(inputArr) { 
	var cont = document.getElementById('output'); 
  cont.innerHTML = ''; 
  inputArr.map(function(item) { 
 		cont.innerHTML += '<div class="item">'+ item.offer.title +'</div>'; 
  }); 
} 
 
showData(inputData.data); 
var houseType = document.getElementById('housing-type'); 
houseType.addEventListener('change', function(e) { 
	var elem = e.target; 
  var newArray = inputData.data.filter(function(item) { 
  	return elem.value === item.offer.type 
  }); 
  showData(newArray); 
});

.item { 
  padding-bottom: 10px; 
}

<select id="housing-type"> 
  <option disabled selected> 
    Выберите тип дома 
  </option> 
  <option value="house"> 
    Дом 
  </option> 
  <option value="notHouse"> 
    Не дом 
  </option> 
</select> 
 
<div id="output"> 
 
</div>