[Javascript] Querying an Immutable.js Map()

Learn how to query an Immutable.Map() using get, getIn, has, includes, find, first and last. These are powerful operators that make finding data in an object graph pain free.

 

has, includes, contains:

//has()
var map = Immutable.Map({a: '10'});
console.log(map.has("a")); //true

//includes / contains
var todo = {
  id: +new Date(),
  name: "name",
  content: "content"
};
var todo2 = {
  id: +new Date(),
  name: "name",
  content: "content"
};

var todos = Immutable.Map();
todos = todos.set(todo.id, todo);
console.log(todos.contains(todo)); //true
console.log(todos.contains(todo2)); //false

 

first(), getIn()

// first(), getIn()

//Create tow Maps
var todos = Immutable.Map();
var todos2 = Immutable.Map();

//Create new Data
var todo1 = {
  id: +new Date(),
  name: "name",
  content: "content"
};
var todo2 = {
  id: +new Date()+1000,
  name: "name",
  content: "content"
};
var todo3 = {
  id: +new Date()+3000,
  name: "name",
  content: "content"
};
var todo4 = {
  id: +new Date()+4000,
  name: "name",
  content: "content"
};

//Add data to the map
todos =todos.set(todo1.id, todo1);
todos= todos.set(todo2.id, todo2);
todos2=todos2.set(todo3.id, todo3);
todos2=todos2.set(todo4.id, todo4);

//Wrap maps in another map
var multipleTodoStates = Immutable.Map({
    "todo1": todos,
    "todo2": todos2
});

//Get first todo's id in the first map
const todoID = todos.first().id; 
console.log(todoID);
//Try to find the first todo in deep map
//"todo1" is the first level map
//then downto the second level to find the id
//If nohting return null
var res = multipleTodoStates.getIn(["todo1", todoID], null);
var res2 = multipleTodoStates.getIn(["todo2", todoID], null);
console.log(res);
console.log(res2);

 

find():

//find()
var todo = {
  id: +new Date(),
  name: "Wan",
  content: "Finish it"
};

var todos = Immutable.Map();
todos = todos.set(todo.id, todo);

var foundTodo = todos.find( (t)=>{
  return t.id === todo.id 
}, null, null) ;

console.log(foundTodo.id);