javascript - Object property becomes null after chrome.storage.sync.set -

i'm building chrome extension , have encountered bug cannot wrap head around. problem single object property becomes null in chromes' storage.

i'm testing doing:

console.log("pre-storage", settings); var obj = {}; obj[storage_key] = settings;  chrome.storage.sync.set(obj, function() {     chrome.storage.sync.get(storage_key, function(data) {         console.log("post-storage", data[storage_key]);     }); }); 

this output:

pre-storage, object {     ...     soundclip: object {         options: array[5],         selected: object {             label: "soft2",             value: "snd/soft2.wav"         }     } }  post-storage, object {     ...     soundclip: object {         options: array[5],         selected: null     } } 

storing json.parse(json.stringify(obj)) instead of obj directly seems fix this. have ideas might cause this? appreciated!

edit: making deep copy of obj not fix it.

edit2: should expand on how settings.soundclip set. i'm using angular (1.x) , i'm using custom select directive. stripped down directive looks this:

function myselect() {     return {         restrict: "e",         templateurl: "myselect.html",         scope: {             options: "=",             selected: "="         },         link: function (scope) {             scope.select = function (item) {                 scope.selected = item;             };         }     } } 

directive template view (myselect.html):

<div>     <div ng-repeat="item in options track $index"          ng-click="select(item)">     </div> </div> 

the properties two-way bound this:

<my-select selected="settings.soundclip.selected"            options="settings.soundclip.options"> </my-select > 

since calling json.parse(json.stringify(obj)) seems fix it, guess you're having problem encoding settings object variable instead of string. see answer here might help.