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

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

0 голосов
/ 18 октября 2019

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

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

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

В моем теге скрипта, когда я console.log ('<% = Houses%>'), он возвращает массив с объектами, что означает, что он знает, что массив есть, но под этиммоя функция, которая сортирует массив по цене. Но опять же ... когда я нажимаю кнопку, это не меняет порядок цикла For, который отображается при первом рендеринге. Что я делаю не так?

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

Вот мой код. 

<%  include partials/header %>


  <button type="button" name="button" id="button"></button>


  <%  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}
    ] %>


  <div class="row text-center">
    <% houses.forEach(function(house) { %>
      <div class="col-md-3 col-sm-6">
        <div class="thumbnail">
          <img src="<%= house.image %>">
          <div class="caption">
            <h4><%= house.name %></h4>
          </div>
        </div>

      </div>
    <% }) %>
  </div>

</div>


<script type="text/javascript">
  console.log('<%= houses %>');

  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;
    });
  })
</script>

<%  include partials/footer %>
...