How to get distinct value using lodash in ReactJS?

Question

How to get distinct value using lodash in ReactJS? Now I'm getting all the data. But how to avoid printing duplicate data? Actually it is a filter box. So data repetition I've to avoid. Can anyone help me out?

Function:

  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 Part:

  <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>

juanlumn · Accepted Answer · 2017-11-01 19:02:01Z

1

You can use _.uniqBy, as per documentation:

This method is like _.uniq except that it accepts iteratee which is invoked for each element in array to generate the criterion by which uniqueness is computed. The order of result values is determined by the order they occur in the array. The iteratee is invoked with one argument: (value).

I've added an example:

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:

From the method shared in the comments I'm guessing that what you want to do is something like:

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

edited Nov 1, 2017 at 19:02

answered Nov 1, 2017 at 18:17

juanlumn

7,3032 gold badges34 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Riya Kapuria Over a year ago

How to put loop inside function?

Riya Kapuria Over a year ago

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);} for(var j =0 ; j <= obj ; j++) {} self.setState({events: events});}) .catch(function (error) { console.log(error);});}

Riya Kapuria Over a year ago

I'm not getting the city as well as locations after this.

juanlumn Over a year ago

The updated code was a guess due the lack of information, you need to adapt your code in order to get the desired result. The original question was about how to avoid printing duplicate data using lodash not how to implement _.uniqBy in your code.

Collectives™ on Stack Overflow

How to get distinct value using lodash in ReactJS?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related