0

Получаю данные с сервера с помощью функции 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

3
  • Приведите пример данных и желаемый фильтр.
    – doox911
    8 июл 2019 в 8:52
  • фильтр по value : <option value="house">Дом</option> Пример json c сервера {author: {…}, offer: {…}, location: {…}}
    – Таня
    8 июл 2019 в 9:12
  • По подробнее json и в праку в вопрос. Вопрос можно править.
    – doox911
    8 июл 2019 в 9:17

1 ответ 1

0

Если представленный 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.