поиск по описанию гостиничного номера и, если его соответствие, показывают соответствующие номера и номера, используя vuejs / javascript [es5] - PullRequest
Новая
       5

поиск по описанию гостиничного номера и, если его соответствие, показывают соответствующие номера и номера, используя vuejs / javascript [es5]

0 голосов
/ 09 февраля 2020 
{
  "Data": {
    "Services": [
      {
        "Description": "Test",
        "ServiceID": 147855555,
        "Hotels": [
          {
            "HotelId": "3969f33bc946",
            "HotelName": "Crackle",
            "IsSelected": true,
            "rooms": [
              {
                "RoomId": "0abddf051b2f",
                "HotelRoomDescription": "Room1",
                "IsSelected": false
              },
              {
                "RoomId": "7ea2a918992f",
                "HotelRoomDescription": "Room2",
                "IsSelected": false
              }
            ]
          },
          {
            "HotelId": "1c6d71b3dc8a",
            "HotelName": "Steve",
            "IsSelected": true,
            "rooms": [
              {
                "RoomId": "679c9216304f",
                "HotelRoomDescription": "Bar",
                "IsSelected": false
              },
              {
                "RoomId": "b71e7f62c0e9",
                "HotelRoomDescription": "Station",
                "IsSelected": false
              },
              {
                "RoomId": "848abbb3bce7",
                "HotelRoomDescription": "Room 1",
                "IsSelected": false
              },
              {
                "RoomId": "270c22b8ef9e",
                "HotelRoomDescription": "Room 2",
                "IsSelected": false
              }
            ]
          },
          {
            "HotelId": "5dfa2733f743",
            "HotelName": "Club",
            "IsSelected": false,
            "rooms": []
          }
        ]
      }
    ]
  },
  "Message": "Success",
  "Status": "Success",
  "Type": 0
}

На передней стороне я показал детали в виде дерева. Например, если мы ищем «бар», то название отеля «Стив» содержит номер «бар». Затем необходимо показать соответствующее название отеля и HotelRoomDescription. Если мы не выполняли поиск, он отображал все названия отелей и соответствующие им номера в виде древовидной структуры.

Здесь roomSearch - это v-модель, что бы мы ни вводили при поиске, получая значение через это. 

if(this.roomSearch.trim() === "") return this.hotels;

var roomenames = this.hotels.filter(function(hotel){
  return hotel.HotelRoomDescription.toLowerCase().indexOf(_this.roomSearch.toLowerCase()) -1;
});
return roomenames;

Код, который написан внутри, содержит ошибки, он не фильтрует HotelRoomDescription. Это не происходит внутри комнаты .....

1 Ответ

0 голосов
/ 09 февраля 2020

Вы пытаетесь отфильтровать HotelRoomDescription для отеля (hotel.HotelRoomDescription), но, согласно вашим данным, "HotelRoomDescription" является свойством "комнаты".

В вашей функции фильтрации вам необходимо oop во второй раз за hotel.rooms.
Вот пример, который работает (с упрощенными данными, безусловно, нуждается в улучшении): 

new Vue({
  el: "#app",
  data () {
    return {
      hotels: [
        {
          "HotelName": "Crackle",
          "rooms": [
            { "HotelRoomDescription": "Room1" },
            { "HotelRoomDescription": "Room2" }
          ]
        },
        {
          "HotelName": "Steve",
          "rooms": [
            { "HotelRoomDescription": "Bar" },
            { "HotelRoomDescription": "Station" },
            { "HotelRoomDescription": "Room 1" },
            { "HotelRoomDescription": "Room 2" }
          ]
        },
        {
          "HotelName": "Club",
          "rooms": []
        }
      ],
      roomSearch: ''
    }
  },
  computed: {
    filteredHotels () {
      var self = this
      if (this.roomSearch.trim() === '') return this.hotels
      return this.hotels.filter(function(h) {
      	return h.rooms.some(function(r) {
          return r.HotelRoomDescription.toLowerCase().includes(self.roomSearch.toLowerCase())
        })
      })
    }
  },
  methods: {
    filteredRooms(rooms) {
      var self = this
      if (this.roomSearch.trim() === '') return rooms
      return rooms.filter(function(r) {
      	return r.HotelRoomDescription.toLowerCase().includes(self.roomSearch.toLowerCase())
      })
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="roomSearch">
  <ol>
    <li v-for="hotel in filteredHotels">
    <h4>{{ hotel.HotelName }}</h4>
      <ul>
        <li v-for="room in filteredRooms(hotel.rooms)">
          {{ room.HotelRoomDescription }}
        </li>
      </ul>
    </li>
  </ol>
</div>
...