ReactJSでlodashを使って別の値を取得する方法は？

Question

ReactJSでlodashを使用して異なる値を取得するにはどうすればよいですか？今私はすべてのデータを取得しています。しかし、重複データの印刷を避けるにはどうすればよいですか？実際はフィルターボックスです。データの繰り返しは避けなければならない。誰か助けてくれますか？

機能：

comboClick() { 
    var apiBaseUrl = "http://api.eventsacross-stage.railsfactory.com/api/"; 
    var input = this.state.search_event; 
    let self = this; 
    axios.get(apiBaseUrl+'v1/events/?on_dashboard=false'+input) 
    .then(function (response) { 
     let events = response.data.events; 
     self.setState({events: events}); 
     console.log(response); 
    }) 
    .catch(function (error) { 
     console.log(error); 
    }); 
    } 

JSXパート：

<div className="dropdown text-center"> 
        <button 
        className="btn btn-default dropdown-toggle" 
        type="button" 
        data-toggle="dropdown" 
        style={{width: "50%"}} 
        onClick={this.comboClick.bind(this)}> 
         Place 
         <span className="caret"></span> 
        </button> 
        <ul className="dropdown-menu"> 
        {this.state.events.map(function (event, i) { 
         return (
         <div key={i}> 
          {event.locations.map(function (locations, j) { 
          return (
           <li key={j}><p>{locations.city}</p></li> 
          ) 
          })} 
         </div> 
        ) 
        })} 
        </ul> 
       </div> 

Answer 1

あなたはdocumentationあたりとして、_.uniqByを使用することができます。

この方法は、それがiterateeを受け入れることを除いて_.uniqのようなものですarrayの各要素に対して が呼び出され、 一意性が計算されます。結果の値の順序は、配列内で発生する順序で によって決定されます。 iterateeは1つの 引数で呼び出されます：（値）。

私は例を追加しました：

var locations = 
 
[ 
 
{city:"city1"}, 
 
{city:"city2"}, 
 
{city:"city3"}, 
 
{city:"city1"}, 
 
]; 
 

 
var locationsUnique = _.uniq(locations, 'city'); 
 

 
console.log(locationsUnique);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

UPDATE：私は何がやりたいことはあると推測しているコメントで共有する方法から

次のようなもの：

comboClick() { 
    var apiBaseUrl = "api.eventsacross-stage.railsfactory.com/api/"; 
    var input = this.state.search_event; 
    let self = this; 
    axios.get(apiBaseUrl + 'v1/events/?on_dashboard=false' + input).then(function(response) { 
    let events = response.data.events; 
    for (var i = 0; i < response.data.events_count; i++) { 
     var obj = response.data.events[i]; 
     console.log(obj.locations); 
     //Assuming that obj.locations has the locations that you want to display 
     var locationsUnique = _.uniq(obj, 'city'); //Added this line 
     console.log(locationsUnique); //Added this line 
    } 
    for (var j = 0; j <= obj; j++) {} 
    self.setState({events: events}); 
    }).catch(function(error) { 
    console.log(error); 
    }); 
}