javascript — Как я могу получить данные из моего цикла For Loop для изменения, когда я хочу отсортировать данные по цене, местоположению и т. д. через EJS? Как я могу фильтровать данные с помощью EJS?

Как я могу изменить данные из моего цикла For Loop, если я хочу отсортировать данные по цене, местоположению и т. Д. Через EJS? Как я могу фильтровать данные с помощью EJS?

Это может показаться задом наперед. Мне каким-то образом удалось отфильтровать свои данные по цене, местоположению, удобствам и т. Д. С помощью React. Однако, когда я пытаюсь использовать эту же тактику через EJS, она не работает для меня. Что еще более странно, я не вижу ответов на этот вопрос в Интернете. Может быть, есть.

Итак, у меня есть файл EJS, который содержит массив домов и мест, цен и т. Д. Я хочу (для простоты) нажать на кнопку (кнопку, которая сортирует по цене, местоположению и т. Д.). .) … эта кнопка затем изменяет порядок данных, отображаемых в цикле For. Я не могу этого сделать.

My For Loop уже показывает данные в том порядке, в котором они находятся в массиве, но по какой-то причине моя кнопка, когда я нажимаю ее, консоль возвращает `Uncaught ReferenceError: Houses не определен в HTMLButtonElement.

В моем скрипте тега, когда я console.log (‘{amp}lt;% = Houses%{amp}gt;’), он возвращает массив с объектами, что означает, что он знает, что массив есть, но под ним находится моя функция, которая сортирует массив по цене. Но опять же … когда я нажимаю кнопку, это не меняет порядок цикла For, который отображается при первом рендеринге. Что я делаю неправильно?

Мой код в правильном месте? Я знаю, что работаю с шаблонами, так что все будет иначе. Этот код находится в одном файле, который находится в моем каталоге views . Ибо Loop показывает … не в состоянии изменить данные …

Вот мой код

 {amp}lt;% include partials/header %{amp}gt; {amp}lt;button type="button" name="button" id="button"{amp}gt;{amp}lt;/button{amp}gt; {amp}lt;% let houses = [ {city: "Philadelphia", state: "PA", image: "https://images.unsplash.com/photo-1470770841072-f978cf4d019e", price: 304000}, {city: "New York", state: "NY", image: "https://images.unsplash.com/photo-1498855926480-d98e83099315", price: 402000}, {city: "San Francisco", state: "CA", image: "https://images.unsplash.com/photo-1485343034225-9e5b5cb88c6b", price: 572000}, {city: "New York", state: "NY", image: "https://images.unsplash.com/photo-1470770841072-f978cf4d019e", price: 520000}, {city: "Los Angeles", state: "CA", image: "https://images.unsplash.com/photo-1498855926480-d98e83099315", price: 607000}, {city: "Atlanta", state: "GA", image: "https://images.unsplash.com/photo-1485343034225-9e5b5cb88c6b", price: 250000} ] %{amp}gt; {amp}lt;div class="row text-center"{amp}gt; {amp}lt;% houses.forEach(function(house) { %{amp}gt; {amp}lt;div class="col-md-3 col-sm-6"{amp}gt; {amp}lt;div class="thumbnail"{amp}gt; {amp}lt;img src="{amp}lt;%= house.image %{amp}gt;"{amp}gt; {amp}lt;div class="caption"{amp}gt; {amp}lt;h4{amp}gt;{amp}lt;%= house.name %{amp}gt;{amp}lt;/h4{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;% }) %{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script type="text/javascript"{amp}gt; console.log('{amp}lt;%= houses %{amp}gt;'); let button = document.querySelector("#button") button.addEventListener('click', function() { console.log(`houses should change order.`); houses.sort(function (a, b) { return a.price - b.price; }); }) {amp}lt;/script{amp}gt; {amp}lt;% include partials/footer %{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector