9

I'm new to immutable.js and I'd like to understand better how to use records starting from a raw JS object.

With Immutable.fromJS() I can create a map passing a raw object, for example:

var images = {
   "1": {
    id: "1",
    urls: ["/medium/1.jpg", "/large/1.jpg"]
   },
   "2": {
    id: "2",
    urls: ["/medium/1.jpg", "/large/1.jpg"]
   }
  }

var imagesMap = Immutable.fromJS(images);

imagesMap is now a map containing other maps, one for each image.

I'd like instead to create a map containing records, for example using a Image record defined as:

var ImageRecord = Immutable.Record({ id: undefined, urls: undefined })

How can I have imagesMap as map of ImageRecords? Is something I can do passing a reviver to fromJS, or should I go with the "old" approach?

// old approach
var imagesMap = Immutable.Map()
for (key in images) {
   imagesMap.set(key, new ImageRecord(images[key]))
}
gpbl
  • 4,721
  • 5
  • 31
  • 45

1 Answers1

17

Immutable.fromJS has an optional second parameter reviver that you can use. You just need to decide which parts of the js object you want to turn into records.

var images = {
   "1": {
    id: "1",
    urls: ["/medium/1.jpg", "/large/1.jpg"]
   },
   "2": {
    id: "2",
    urls: ["/medium/1.jpg", "/large/1.jpg"]
   }
  };

var ImageRecord = Immutable.Record({ id: "0", urls: [] })

var imagesMap = Immutable.fromJS(images, function(key, value) {
  // This check should be replaced by a better way to know that
  // we really want image records
  if(/^[0-9]+$/.test(key)) {
    return new ImageRecord(value)
  }
  return value
});

// Verify that it's really a record
console.log(imagesMap.get("2").toJS())
console.log(imagesMap.get("2").delete("urls").toJS())

http://jsbin.com/ronomibano/4/edit

OlliM
  • 7,023
  • 1
  • 36
  • 47
  • 2
    Thanks, I've also found in the docs that the reviver `key` is an empty string for top objects, making even easier to check if a value should become a Record. – gpbl Feb 25 '15 at 21:47