從下拉列表中篩選數據

Question

我想基於選擇框的選擇值來篩選數據。

<select id="testDD"> 
    <option value="local">Local</option> 
    <option value="international">Internationl</option> 
</select> 
<div id="list"><!-- List Items to be generated from #testDD value --></div> 

我有數據對象這樣

var data = [ 
    {type: 'local', name: 'abc1', location: 'xyz1'}, 
    {type: 'local', name: 'abc2', location: 'xyz2'}, 
    {type: 'international', name: 'abc3', location: 'xyz3'}, 
    {type: 'local', name: 'abc4', location: 'xyz4'}, 
    {type: 'local', name: 'abc5', location: 'xyz5'}, 
    {type: 'international', name: 'abc6', location: 'xyz6'}, 
    {type: 'international', name: 'abc7', location: 'xyz7'} 
] 

請告訴我篩選出基於選擇的事件數據的理想方式改變了嗎？

Answer 1

const data = [ 
 
    {type: 'local', name: 'abc1', location: 'xyz1'}, 
 
    {type: 'local', name: 'abc2', location: 'xyz2'}, 
 
    {type: 'international', name: 'abc3', location: 'xyz3'}, 
 
    {type: 'local', name: 'abc4', location: 'xyz4'}, 
 
    {type: 'local', name: 'abc5', location: 'xyz5'}, 
 
    {type: 'international', name: 'abc6', location: 'xyz6'}, 
 
    {type: 'international', name: 'abc7', location: 'xyz7'} 
 
]; 
 

 
const filterStream = Rx.Observable.fromEvent(document.getElementById('testDD'), 'change'); 
 

 

 
filterStream 
 
    .map(evt => evt.target.value) 
 
    .startWith(null) 
 
    .subscribe(filterTypeName => { 
 
    const filteredData = data.filter(d => d.type === filterTypeName || !filterTypeName); 
 
    document.getElementById('list').innerText = JSON.stringify(filteredData); 
 
    });

<script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script> 
 
    <select id="testDD"> 
 
    <option value="">Select to filter</option> 
 
    <option value="local">Local</option> 
 
    <option value="international">Internationl</option> 
 
    </select> 
 
    
 
    <h2>filtered resuls</h2> 
 
    <div id="list"> 
 
    <!-- List Items to be generated from #testDD value --> 
 
    </div>