jqueryを使用してjsonからフィルタを検索

Question

私はredbus.inのようなオンラインバス予約Webアプリケーションをビルドしています。これは、redbusで実装されているようなフィルタ検索機能を実装したいものです。ここ

1.There、値droppint point、boardingpoint、bustypeと現在4つのドロップダウンボックスであるワークフローであり、opeartor name

たら、2.ユーザはドロップダウンから1 dropping pointのみリストと結果であろう番組を選択しますそのドロップポイントを持つバスのうち、dropping pointとboarding pointを選択すると、この2つだけを含むバスのリストが表示されます。

これら4つのドロップダウンメニューからユーザーが選択したものは、結果（バスのリスト）にはこれらの値のみが含まれます。

しかし、私はそれを実装する方法、特にフィルタリングを知らない。ここで

が一つのバス

{ 
     "droppingPoints": [ 
    { 
      "time": "09:45 PM", 
      "location": "Kachiguda", 
      "id": "1283518" 
     }, 
     { 
      "time": "09:55 PM", 
      "location": "Narayanaguda", 
      "id": "1283519" 
     }, 
     { 
      "time": "10:05 PM", 
      "location": "Lakdi ka pool", 
      "id": "1283520" 
     }, 
     { 
      "time": "10:15 PM", 
      "location": "Punjagutta", 
      "id": "1283521" 
     }, 
     { 
      "time": "10:25 PM", 
      "location": "Srinivasa Colony", 
      "id": "1283522" 
     }, 
     { 
      "time": "10:25 PM", 
      "location": "SR Nagar", 
      "id": "1283523" 
     }, 
     { 
      "time": "10:25 PM", 
      "location": "Ameerpet", 
      "id": "1283524" 
     }, 
     { 
      "time": "10:30 PM", 
      "location": "Erragadda", 
      "id": "1283525" 
     }, 
     { 
      "time": "10:35 PM", 
      "location": "Bharat Nagar", 
      "id": "1283526" 
     }, 
     { 
      "time": "10:40 PM", 
      "location": "VIVEKANANDA NAGAR", 
      "id": "1283527" 
     }, 
     { 
      "time": "10:40 PM", 
      "location": "Kukatpally", 
      "id": "1282840" 
     }, 
      ], 
     "availableSeats": 4, 
     "partialCancellationAllowed": false, 
     "arrivalTime": "07:00 AM", 
     "boardingPoints": [ 

     { 
      "time": "10:45 PM", 
      "location": "K P H B", 
      "id": "1282841" 
     }, 
     { 
      "time": "10:55 PM", 
      "location": "Hydernagar", 
      "id": "1283073" 
     }, 
     { 
      "time": "10:55 PM", 
      "location": "Nizampet", 
      "id": "1283074" 
     }, 
     { 
      "time": "11:00 PM", 
      "location": "MiyaPur", 
      "id": "1283072" 
     }, 
     { 
      "time": "11:05 PM", 
      "location": "Miyapur Allwin X Road", 
      "id": "1283422" 
     }, 
     { 
      "time": "11:15 PM", 
      "location": "Kondapur", 
      "id": "1283423" 
     }, 
     { 
      "time": "11:20 PM", 
      "location": "Gachibowli", 
      "id": "1283554" 
     } 
     ], 
     "operatorName": "Morning Star Travels", 
     "departureTime": "10:30 PM", 
     "mTicketAllowed": true, 
     "idProofRequired": true, 
     "serviceId": "1572", 
     "fare": "1090.0, 1190.0", 
     "busType": "2+1 Sleeper Non A/C", 
     "routeScheduleId": "84W157YI3YGZKH5B9K0TG4E40VI13", 
     "commPCT": 7.6, 
     "operatorId": 1572, 
     "inventoryType": 2 
    } 

用のサンプルJSONである現在、私はsearch_bus機能でフィルタ機能を実装したい

<script> 
//when select item from dropping point 
$('.drp').on('change',function(){ 
    search_buses(); 
}); 

//when select item from boarding point 
$('.brp').on('change',function(){ 
    search_buses(); 
}); 

//when select item from butype 
$('.bt').on('change',function(){ 
    search_buses(); 
}); 
//when select item from opearto name 
$('.on').on('change',function(){ 
    search_buses(); 
}); 
//function for searching 
function search_buses(){ 
//list of buses in json format. 
    var bus_list; 
} 
</script> 

私の手でこのコードを持っています。しかし、私はそれを行う方法を知らない。

Answer 1

フィルタリングfilterを使用して同じように簡単だろうとsome javascrip方法：

function searchBusesByLocation(location) { 
    filteredBuses = busesArray.filter(function (bus) {//this will create a new array with the filtered items 
     return boardingPointLocationComparisson(bus, location); 
    }); 

    return filteredBuses; 
} 

function boardingPointLocationComparisson(bus, location) {//i'm guessin you want to filter by location, you can do by date or adapt this function like you want 
    return bus.boardingPoints.some(function (boardingPoint) { 
     //the some function will iterate over the array and return true whenever the comparisson is true, false otherwise 
     return boardingPoint.location === location; 
    }) 
} 

その後、あなたは（、ユーザが入力した場所でchangeイベントにsearchBusesByLocationを呼び出すあなたは、コードを適応させることができますその他の場合は）。