Convert JavaScript string in dot notation into an object reference

Question

Given a JS object  var obj     a    b   1   c   2        and a string   a b    how can I convert the string to dot notation so I can go  var val   obj a b   If the string was just  a   I could use obj a   But this is more complex  I imagine there is some straightforward method but it escapes at present

User · Answer

var a     b    c  9       function value layer  path  value        var i   0          path   path split            for    i  lt  path length  i            if  value    null  amp  amp  i   1     path length              layer path i     value          layer   layer path i         return layer      value a   b c       9  value a   b c   4    value a   b c       4   This is a lot of code when compared to the much simpler eval way of doing it  but like Simon Willison says  you should never use eval   Also  JSFiddle

User · Answer

This is my extended solution proposed by  ninjagecko  For me simple string notation was not enough  so below version supports things like   index obj   data accounts 0  address 0  postcode            Get object by index     supported    - arrays supported    - array indexes supported     not-supported    - multiple arrays     issues      index myAccount   accounts 0  address 0  id   - works fine     index myAccount   accounts   address 0  id   - doesnt work     Example     index obj   data accounts   id     gt  returns array of id s    index obj   data accounts 0  id     gt  returns id of 0 element from array    index obj   data accounts 0  addresses list 0  id     gt  error     param obj     param path     returns  any      var index   function obj  path  isArray   arrIndex            is an array     if typeof isArray      undefined   isArray   false         array index         if null  will take all indexes     if typeof arrIndex      undefined   arrIndex   null       var  arrIndex   null       var reduceArrayTag   function i  subArrIndex           return i replace         d  0           i    gt                var tmp   i match         d  0                       isArray   true              if subArrIndex                    arrIndex     tmp 2            tmp 2    null               else                  arrIndex     tmp 2            tmp 2    null                            return                            function byIndex obj  i               if is an array         if isArray               isArray   false              i   reduceArrayTag i  true                  if array index is null                 return an array of with values from every index             if  arrIndex                   var arrValues                         forEach obj   el    gt                        arrValues push index el  i  isArray  arrIndex                                       return arrValues                               if array index is specified             var value   obj arrIndex  i               if isArray                   arrIndex    arrIndex               else                  arrIndex   null                            return value           else                 remove    from notation                 if    has been removed  check the index of array             i   reduceArrayTag i  false               return obj i                          reduce with byIndex method     return path split      reduce byIndex  obj

User · Answer

You can use the library available at npm  which simplifies this process  https   www npmjs com package dot-object   var dot   require  dot-object     var obj      some       nested         value   Hi there               var val   dot pick  some nested value   obj   console log val       Result  Hi there

User · Answer

At the risk of beating a dead horse    I find this most useful in traversing nested objects to reference where you re at with respect to the base object or to a similar object with the same structure  To that end  this is useful with a nested object traversal function  Note that I ve used an array to hold the path  It would be trivial to modify this to use either a string path or an array  Also note that you can assign  undefined  to the value  unlike some of the other implementations    x000D   x000D     x000D     Traverse each key in a nested object and call fn curObject  key  value  baseObject  path  x000D     on each  The path is an array of the keys required to get to curObject from x000D     baseObject using objectPath    If the call to fn   returns falsey  objects below x000D     curObject are not traversed  Should be called as objectTaverse baseObject  fn   x000D     The third and fourth arguments are only used by recursion  x000D      x000D  function objectTraverse  o  fn  base  path    x000D      path   path        x000D      base   base    o  x000D      Object keys o  forEach function  key    x000D          if  fn o  key  o key   base  path   amp  amp  jQuery isPlainObject o key      x000D              path push key   x000D              objectTraverse o key   fn  base  path   x000D              path pop    x000D            x000D          x000D    x000D   x000D     x000D     Get set a nested key in an object  Path is an array of the keys to reference each level x000D     of nesting  If value is provided  the nested key is set  x000D     The value of the nested key is returned  x000D      x000D  function objectPath  o  path  value    x000D      var last   path pop    x000D   x000D      while  path length  amp  amp  o    x000D          o   o path shift     x000D        x000D      if  arguments length  lt  3    x000D          return  o  o last    o   x000D        x000D      return  o last    value   x000D    x000D   x000D   x000D

User · Answer

A little more involved example with recursion   function recompose obj string       var parts   string split           var newObj   obj parts 0        if parts 1            parts splice 0 1           var newString   parts join               return recompose newObj newString             return newObj      var obj     a    b   1   c   2   d  a  b  blah        alert recompose obj  a d a b       blah

User · Answer

you could also use lodash get  You just install this package  npm i --save lodash get  and then use it like this   const get   require  lodash get     const myObj     user    firstName   Stacky   lastName   Overflowy     id  123     console log get myObj   user firstName        prints Stacky console log get myObj   id       prints  123    You can also update values get myObj   user   firstName   John

User · Answer

Here is my code without using eval  Its easy to understand too   function value obj  props      if   props  return obj    var propsArr   props split         var prop   propsArr splice 0  1     return value obj prop   propsArr join           var obj     a    b   1   c   2   d  a  b  blah        console log value obj   a d a b       returns blah

User · Answer

If you want to do this in the fastest possible way  while at the same time handling any issues with the path parsing or property resolution  check out path-value  const  resolveValue    require  path-value     const value   resolveValue obj   a b c     The library is 100  TypeScript  works in NodeJS   all web browsers  And it is fully extendible  you can use lower-level resolvePath  and handle errors your own way  if you want  const  resolvePath    require  path-value     const res   resolvePath obj   a b c        gt  low-level parsing result descriptor

User · Answer

I have extended the elegant answer by ninjagecko so that the function handles both dotted and or array style references  and so that  an empty string causes the parent object to be returned   Here you go   string to ref   function  object  reference        function arr deref o  ref  i    return  ref   o    o ref slice 0  i   -1   ref length          function dot deref o  ref    return ref split      reduce arr deref  o         return  reference   object   reference split      reduce dot deref  object        See my working jsFiddle example here  http   jsfiddle net sc0ttyd q7zyd

User · Answer

Other proposals are a little cryptic  so I thought I d contribute   Object prop   function obj  prop  val       var props   prop split              final   props pop    p      while p   props shift             if  typeof obj p       undefined               return undefined          obj   obj p            return val    obj final    val    obj final     var obj     a    b   1   c   2          get console log Object prop obj   a c       - gt  2    set Object prop obj   a c   function      console log obj     - gt    a    b   1   c   Function

User · Answer

Few years later  I found this that handles scope and array  e g  a  b    c   d etc   function getScopedObj scope  str      let obj scope  arr     try       arr   str split                split by              filter el   gt  el                 filter out empty one        map el   gt  el replace                g           remove string quotation     arr forEach el   gt  obj   obj el       catch e        obj   undefined         return obj     window a    b   c   d   etc   success       getScopedObj window   a b c d etc                  success getScopedObj window   a  b    c   d etc            success getScopedObj window   a  INVALID    c   d etc      undefined

User · Answer

If you wish to convert any object that contains dot notation keys into an arrayed version of those keys you can use this     This will convert something like      name   Andy     brothers 0   Bob    brothers 1   Steve    brothers 2   Jack    sisters 0   Sally      to       name   Andy     brothers    Bob    Steve    Jack     sisters    Sally         convertDotNotationToArray objectWithDotNotation         Object entries objectWithDotNotation  forEach   key  val     gt              Is the key of dot notation        if  key includes                 const  name  index    key split                   If you have not created an array version  create one          if   objectWithDotNotation name               objectWithDotNotation name    new Array                          Save the value in the newly created array at the specific index          objectWithDotNotation name  index    val             Delete the current dot notation key val         delete objectWithDotNotation key

User · Answer

If you can use lodash  there is a function  which does exactly that     get object  path   defaultValue    var val     get obj   a b

User · Answer

Yes  it was asked 4 years ago and yes  extending base prototypes is not usually good idea but  if you keep all extensions in one place  they might be useful  So  here is my way to do this      Object defineProperty Object prototype   getNestedProperty         value       function  propertyName            var result   this          var arr   propertyName split                while  arr length  amp  amp  result                result   result arr shift                        return result             enumerable  false       Now you will be able to get nested property everywhere without importing module with function or copy pasting function   UPD Example    a  b 11   getNestedProperty  a b      returns 11   UPD 2  Next extension brokes mongoose in my project  Also I ve read that it might broke jquery  So  never do it in next way   Object prototype getNestedProperty   function  propertyName        var result   this      var arr   propertyName split            while  arr length  amp  amp  result            result   result arr shift                return result

User · Answer

I copied the following from Ricardo Tomasi s answer and modified to also create sub-objects that don t yet exist as necessary  It s a little less efficient  more ifs and creating of empty objects   but should be pretty good   Also  it ll allow us to do Object prop obj   a b   false  where we couldn t before  Unfortunately  it still won t let us assign undefined   Not sure how to go about that one yet          Object prop         Allows dot-notation access to object properties for both getting and setting         param  Object  obj    The object we re getting from or setting     param  string  prop   The dot-notated string defining the property location     param  mixed   val    For setting only  the value to set      Object prop   function obj  prop  val      var props   prop split              final   props pop           p      for  var i   0  i  lt  props length  i           p   props i        if  typeof obj p       undefined               If we re setting        if  typeof val      undefined                 If we re not at the end of the props  keep adding new empty objects          if  i    props length             obj p                        else          return undefined              obj   obj p          return typeof val      undefined     obj final    val    obj final

User · Answer

You can obtain value of an object member by dot notation with a single line of code   new Function       return       path  obj     In you case   var obj     a    b   1   c   2      var val   new Function       return   a b   obj     To make it simple you may write a function like this   function objGet obj  path       return new Function       return       path  obj       Explanation   The Function constructor creates a new Function object  In JavaScript every function is actually a Function object  Syntax to create a function explicitly with Function constructor is   new Function   arg1   arg2      argN     functionBody    where arguments arg1 to argN  must be a string that corresponds to a valid javaScript identifier and functionBody is a string containing the javaScript statements comprising the function definition   In our case we take the advantage of string function body to retrieve object member with dot notation   Hope it helps

User · Answer

using Array Reduce function will get set based on path provided  i tested it with a b c and a b 2 c  a  b  0 1  c 7     and its works for both getting key or mutating object to set value cheerz  x000D   x000D      function setOrGet obj  path     newValue         const l   typeof path      string    path split        path        return l reduce  carry item  idx   gt          const leaf   carry item                     is this last item in path   cool lets set get value        if  l length-idx   1                  mutate object if newValue is set           carry item    newValue   undefined   leaf   newValue              return value if its a get object if it was a set          return newValue   undefined   leaf   obj                        carry item    leaf           mutate if key not an object         return carry item      return object ref  to continue reduction           obj                     console log       setOrGet  a   b 1    a b       1         Test Case  Direct read failed                 console log       setOrGet  a   b 1    a c  22  a c   22         Test Case  Direct set failed                 console log       setOrGet  a   b  1 2     a b 1  22  a b 1    22         Test Case  Direct set on array failed                 console log       setOrGet  a   b  c   e 1       a b c e  22  a b c  e   22         Test Case  deep get failed                    failed    Thats your homework         console log       setOrGet  a   b  c   e  1 2 3 4 5        a b c e 3   22                            x000D   x000D   x000D   my personal recommendation   do not use such a thing unless there is no other way   i saw many examples people use it for translations for example from json  so you see function like locale  app homepage welcome     this is just bad  if you already have data in an object json  and you know path   then just use it directly example locale   app homepage welcome by changing you function to return object you get typesafe  with autocomplete  less prone to typo s

User · Answer

Here is my implementation  Implementation 1  Object prototype access   function         var ele   this arguments 0        if arguments length     1  return ele      return ele access apply ele     slice call arguments  1        Implementation 2  using array reduce instead of slice   Object prototype access   function         var self   this      return    reduce call arguments function prev cur            return prev cur          self       Examples   var myobj     a    b    c    d   abcd   e   11 22 33        myobj access  a   b   c       returns    d   abcd   e  0 1 2 3   myobj a b access  c   d       returns   abcd  myobj access  a   b   c   e  0      returns  11   it can also handle objects inside arrays as for  var myobj2     a     b     c   ab0c     d   ab1d      myobj2 access  a   b   1   d       returns   ab1d

User · Answer

recent note  While I m flattered that this answer has gotten many upvotes  I am also somewhat horrified  If one needs to convert dot-notation strings like  x a b c  into references  it could  maybe  be a sign that there is something very wrong going on  unless maybe you re performing some strange deserialization        That is to say  novices who find their way to this answer must ask themselves the question  why am I doing this        It is of course generally fine to do this if your use case is small and you will not run into performance issues  AND you won t need to build upon your abstraction to make it more complicated later  In fact  if this will reduce code complexity and keep things simple  you should probably go ahead and do what OP is asking for  However  if that s not the case  consider if any of these apply       case 1  As the primary method of working with your data  e g  as your app s default form of passing objects around and dereferencing them   Like asking  how can I look up a function or variable name from a string           This is bad programming practice  unnecessary metaprogramming specifically  and kind of violates function side-effect-free coding style  and will have performance hits   Novices who find themselves in this case  should instead consider working with array representations  e g    x   a   b   c    or even something more direct simple straightforward if possible  like not losing track of the references themselves in the first place  most ideal if it s only client-side or only server-side   etc   A pre-existing unique id would be inelegant to add  but could be used if the spec otherwise requires its existence regardless           case 2  Working with serialized data  or data that will be displayed to the user  Like using a date as a string  1999-12-30  rather than a Date object  which can cause timezone bugs or added serialization complexity if not careful   Or you know what you re doing          This is maybe fine  Be careful that there are no dot strings     in your sanitized input fragments          If you find yourself using this answer all the time and converting back and forth between string and array  you may be in the bad case  and should consider an alternative    Here s an elegant one-liner that s 10x shorter than the other solutions   function index obj i   return obj i    a b etc  split      reduce index  obj     edit  Or in ECMAScript 6    a b etc  split      reduce  o i   gt o i   obj     Not that I think eval always bad like others suggest it is  though it usually is   nevertheless those people will be pleased that this method doesn t use eval  The above will find obj a b etc given obj and the string  a b etc     In response to those who still are afraid of using reduce despite it being in the ECMA-262 standard  5th edition   here is a two-line recursive implementation   function multiIndex obj is        obj   1   2   3   - gt    obj  1     2     3       return is length   multiIndex obj is 0   is slice 1     obj   function pathIndex obj is         obj  1 2 3  - gt  multiIndex obj   1   2   3        return multiIndex obj is split         pathIndex  a b etc     Depending on the optimizations the JS compiler is doing  you may want to make sure any nested functions are not re-defined on every call via the usual methods  placing them in a closure  object  or global namespace    edit   To answer an interesting question in the comments      how would you turn this into a setter as well  Not only returning the values by path  but also setting them if a new value is sent into the function      Swader Jun 28 at 21 42    sidenote  sadly can t return an object with a Setter  as that would violate the calling convention  commenter seems to instead be referring to a general setter-style function with side-effects like index obj  a b etc   value  doing obj a b etc   value    The reduce style is not really suitable to that  but we can modify the recursive implementation   function index obj is  value        if  typeof is     string           return index obj is split       value       else if  is length  1  amp  amp  value   undefined          return obj is 0     value      else if  is length  0          return obj      else         return index obj is 0   is slice 1   value       Demo    gt  obj    a  b  etc 5      gt  index obj  a b etc   5  gt  index obj   a   b   etc       works with both strings and lists 5   gt  index obj  a b etc   123      setter-mode - third argument  possibly poor form  123   gt  index obj  a b etc   123      though personally I d recommend making a separate function setIndex       I would like to end on a side-note that the original poser of the question could  should   be working with arrays of indices  which they can get from  split   rather than strings  though there s usually nothing wrong with a convenience function     A commenter asked      what about arrays  something like  a b 4  c d 1  2  3        AlexS   Javascript is a very weird language  in general objects can only have strings as their property keys  so for example if x was a generic object like x     then x 1  would become x  1      you read that right    yup     Javascript Arrays  which are themselves instances of Object  specifically encourage integer keys  even though you could do something like x     x  puppy   5    But in general  and there are exceptions   x  somestring     x somestring  when it s allowed  you can t do x 123     Keep in mind that whatever JS compiler you re using might choose  maybe  to compile these down to saner representations if it can prove it would not violate the spec    So the answer to your question would depend on whether you re assuming those objects only accept integers  due to a restriction in your problem domain   or not  Let s assume not  Then a valid expression is a concatenation of a base identifier plus some  identifiers plus some   stringindex  s  This would then be equivalent to a  b   4   c    d   1  2  3   though we should probably also support a b  c  validjsstringliteral   3   You d have to check the ecmascript grammar section on string literals to see how to parse a valid string literal  Technically you d also want to check  unlike in my first answer  that a is a valid javascript identifier   A simple answer to your question though  if your strings don t contain commas or brackets  would be just be to match length 1  sequences of characters not in the set   or   or      gt   abc 4  c def 1  2    gh     match            g                                 abc    4    c    def    1    2     gh      If your strings don t contain escape characters or   characters  and because IdentifierNames are a sublanguage of StringLiterals  I think     you could first convert your dots to       gt  var R     demoString  abc 4  c def 1  2    gh       gt  for var match matcher                                             d     g         match matcher exec demoString         R push Array from match  slice 1  filter x  gt x   undefined  0         extremely bad code because js regexes are weird  don t use this    gt  R    abc    4    c    def    1    2    gh     Of course  always be careful and never trust your data  Some bad ways to do this that might work for some use cases also include      hackish wrongish  preprocess your string into  a b 4 c d 1 2 3   e g     gt  yourstring replace    g     replace     g      split       a b 4 c d 1 2 3     use code from before     Special 2018 edit   Let s go full-circle and do the most inefficient  horribly-overmetaprogrammed solution we can come up with    in the interest of syntactical purityhamfistery  With ES6 Proxy objects     Let s also define some properties which  imho are fine and wonderful but  may break improperly-written libraries  You should perhaps be wary of using this if you care about performance  sanity  yours or others    your job  etc       1 2 3  -1   3  or just use  slice -1  0   if    1  -1       Object defineProperty Array prototype  -1   get    return this this length-1        credit to caub     WARNING  THIS XTREME    RADICAL METHOD IS VERY INEFFICIENT     ESPECIALLY IF INDEXING INTO MULTIPLE OBJECTS     because you are constantly creating wrapper objects on-the-fly and     even worse  going through Proxy i e  runtime  reflection  which prevents    compiler optimization     Proxy handler to override obj    obj   and obj        var hyperIndexProxyHandler         get  function obj key  proxy            return key split      reduce  o i   gt o i   obj              set  function obj key value  proxy            var keys   key split               var beforeLast   keys slice 0 -1  reduce  o i   gt o i   obj           beforeLast keys -1     value             has  function obj key              etc          function hyperIndexOf target        return new Proxy target  hyperIndexProxyHandler       Demo   var obj    a  b  c 1  d 2     console log  obj is    JSON stringify obj     var objHyper   hyperIndexOf obj   console log   proxy override get  objHyper  a b c   is    objHyper  a b c     objHyper  a b c     3  console log   proxy override set  objHyper  a b c   3  now obj is    JSON stringify obj     console log   behind the scenes  objHyper is    objHyper    if        H      Object defineProperties Object prototype            H                get  function                     return hyperIndexOf this      TODO cache as a non-enumerable property for efficiency                                   console log   shortcut  obj H  a b c   4    obj H  a b c     4  console log   shortcut  obj H  a b c   is obj  a    b    c   is   obj H  a b c       Output      obj is    a    b    c  1  d  2          proxy override get  objHyper  a b c   is  1       proxy override set  objHyper  a b c   3  now obj is    a    b    c  3  d  2          behind the scenes  objHyper is  Proxy   a               shortcut  obj H  a b c   4       shortcut  obj H  a b c   is obj  a    b    c   is  4   inefficient idea  You can modify the above to dispatch based on the input argument  either use the  match            g  method to support obj  keys   like 3   this    or if instanceof Array  then just accept an Array as input like keys     a   b   c    obj H keys      Per suggestion that maybe you want to handle undefined indices in a  softer  NaN-style manner  e g  index  a  b  c          a x c   return undefined rather than uncaught TypeError       1  This makes sense from the perspective of  we should return undefined rather than throw an error  in the 1-dimensional index situation       e g     undefined  so  we should return undefined rather than throw an error  in the N-dimensional situation   2  This does not make sense from the perspective that we are doing x  a    x    c    which would fail with a TypeError in the above example   That said  you d make this work by replacing your reducing function with either    o i   gt o   undefined undefined o i   or  o i   gt  o      i     You can make this more efficient by using a for loop and breaking returning whenever the subresult you d next index into is undefined  or using a try-catch if you expect such failures to be sufficiently rare

User · Answer

If you want to convert a string dot notation into an object  I ve made a handy little helper than can turn a string like a b c d with a value of e with dotPathToObject  quot a b c d quot    quot value quot   returning this           quot a quot            quot b quot              quot c quot                quot d quot    quot value quot                               https   gist github com ahallora 9731d73efb15bd3d3db647efa3389c12

User · Answer

GET   SET answer that also works in react native  you can t assign to Object prototype currently    Object defineProperty Object prototype   getNestedProp         value  function desc            var obj   this          var arr   desc split               while arr length  amp  amp   obj   obj arr shift               return obj             enumerable  false      Object defineProperty Object prototype   setNestedProp         value  function desc  value            var obj   this          var arr   desc split               var last   arr pop            while arr length  amp  amp   obj   obj arr shift               obj last    value             enumerable  false       Usage   var a     values     value  null       var b     one    two   foo        a setNestedProp  values 0 value   b getNestedProp  one two     console log a values 0  value      foo

User · Answer

If you expect to dereference the same path many times  building a function for each dot notation path actually has the best performance by far  expanding on the perf tests James Wilkins linked to in comments above    var path    a b x   var getter   new Function  obj    return obj     path         getter obj     Using the Function constructor has some of the same drawbacks as eval   in terms of security and worst-case performance  but IMO it s a badly underused tool for cases where you need a combination of extreme dynamism and high performance  I use this methodology to build array filter functions and call them inside an AngularJS digest loop  My profiles consistently show the array filter   step taking less than 1ms to dereference and filter about 2000 complex objects  using dynamically-defined paths 3-4 levels deep   A similar methodology could be used to create setter functions  of course   var setter   new Function  obj    newval    obj     path       newval     setter obj   some new val

User · Answer

Using object-scan seems a bit overkill  but you can simply do  x000D   x000D     const objectScan   require  object-scan     const get    obj  p    gt  objectScan  p     abort  true  rtn   value     obj    const obj     a    b   1   c   2        console log get obj   a b          gt  1  console log get obj     c          gt  2 x000D   as-console-wrapper  max-height  100   important  top  0  x000D   lt script src  https   bundle run object-scan 13 7 1  gt  lt  script gt  x000D   x000D   x000D   Disclaimer  I m the author of object-scan There are a lot more advanced examples in the readme

User · Answer

It s not clear what your question is  Given your object  obj a b would give you  2  just as it is  If you wanted to manipulate the string to use brackets  you could do this   var s    a b   s    obj      s replace     g                  alert s      displays obj  a    b

User · Answer

I used this code in my project  const getValue    obj  arrPath    gt      arrPath reduce  x  y    gt        if  y in x  return x y      return         obj      Usage   const obj     id    user    local  104       const path      id    user    local    getValue obj  path     return 104

User · Answer

var find   function root  path      var segments   path split             cursor   root        target     for  var i   0  i  lt  segments length    i       target   cursor segments i       if  typeof target     undefined   return void 0     cursor   target         return cursor      var obj     a    b   1   c   2      find obj   a b       1  var set   function  root  path  value       var segments   path split              cursor   root         target      for  var i   0  i  lt  segments length - 1    i          cursor   cursor segments i                    cursor segments segments length - 1     value      set obj   a k   function      console log  hello world         find obj   a k         hello world

User · Answer

I suggest to split the path and iterate it and reduce the object you have  This proposal works with a default value for missing properties    x000D   x000D  const getValue    object  keys    gt  keys split      reduce  o  k    gt   o        k   object   x000D   x000D  console log getValue   a    b   1   c   2        a b     x000D  console log getValue   a    b   1   c   2        foo bar baz     x000D   x000D   x000D

User · Answer

Note if you re already using Lodash you can use the property or get functions   var obj     a    b   1   c   2         property  a b   obj        gt  1   get obj   a b         gt  1   Underscore also has a property function but it doesn t support dot notation

User · Answer

Many years since the original post   Now there is a great library called  object-path   https   github com mariocasciaro object-path  Available on NPM and BOWER https   www npmjs com package object-path  It s as easy as    objectPath get obj   a c 1       returns  f  objectPath set obj   a j 0 f    m      And works for deeply nested properties and arrays

[javascript] Convert JavaScript string in dot notation into an object reference

Examples related to javascript