Matthew Herbst Matthew Herbst - 2 months ago 21
Javascript Question

Best way to remove an element from a List inside of a Map in Immutable.js

I am using Facebook's Immutable.js to speed up my React application to take advantage of the PureRender mixin. One of my data structures is a

Map()
and one of the keys in that map has a
List<Map>()
as its value. What I'm wondering is, not knowing the index of the item I want to remove from the
List()
, what is the best way to go about removing it? So far I have come up with the below. Is this the best (most efficient) way?

// this.graphs is a Map() which contains a List<Map>() under the key "metrics"
onRemoveMetric: function(graphId, metricUUID) {
var index = this.graphs.getIn([graphId, "metrics"]).findIndex(function(metric) {
return metric.get("uuid") === metricUUID;
});
this.graphs = this.graphs.deleteIn([graphdId, "metrics", index]);
}


(I have considered moving the
List<Map>()
to a
Map()
itself since each element in the list has a UUID, however, I'm not at that point yet.)

Answer

You could use Map.filter:

onRemoveMetric: function(graphId, metricUUID) {
  this.graphs = this.graphs.setIn([graphId, "metrics"],
    this.graphs.getIn([graphId, "metrics"]).filter(function(metric) {
      return metric.get("uuid") !== metricUUID;
    })
  )
}

From a performance point of view switching to a Map would probably be more efficient, as this code (like yours) has to iterate over the elements in the list.