Dynamically access object property using variable

Question

I m trying to access a property of an object using a dynamic name  Is this possible   const something     bar   Foobar      const foo    bar   something foo     The idea is to access something bar  getting  Foobar

User · Answer

You should use JSON parse  take a look at https   www w3schools com js js json parse asp  const obj   JSON parse     name   John    age  30   city   New York     console log obj name  console log obj age

User · Answer

For anyone looking to set the value of a nested variable  here is how to do it   const     require  lodash      import lodash module  var object      a       b      c   3            set object   a 0  b c   4   console log object a 0  b c        gt  4   Documentation  https   lodash com docs 4 17 15 set  Also  documentation if you want to get a value  https   lodash com docs 4 17 15 get

User · Answer

You can achieve this in quite a few different ways   let foo         bar   Hello World      foo bar  foo  bar      The bracket notation is specially powerful as it let s you access a property based on a variable   let foo         bar   Hello World      let prop    bar    foo prop     This can be extended to looping over every property of an object  This can be seem redundant due to newer JavaScript constructs such as for     of      but helps illustrate a use case   let foo         bar   Hello World       baz   How are you doing        last   Quite alright      for  let prop in foo getOwnPropertyNames          console log foo prop        Both dot and bracket notation also work as expected for nested objects   let foo         bar            baz   Hello World            foo bar baz  foo  bar    baz    foo bar  baz    foo  bar   baz    Object destructuring  We could also consider object destructuring as a means to access a property in an object  but as follows   let foo         bar   Hello World       baz   How are you doing        last   Quite alright      let prop    last   let   bar  baz   prop   customName     foo      bar    Hello World     baz    How are you doing      customName    Quite alright

User · Answer

In javascript we can access with    dot notation     - foo bar  square brackets  - foo someVar  or foo  string     But only second case allows to access properties dynamically   var foo     pName1   1  pName2    1   foo   bar    3          var name    pName  var num    1   foo name   num      1     --   var a   2  var b   1  var c    foo    foo name   a  b  c      bar

User · Answer

Access dynamic object properties in js we can use bracket notation  const something        bar   quot Foobar  quot      const foo    bar    console log something foo        quot Foobar  quot

User · Answer

Following is an ES6 example of how you can access the property of an object using a property name that has been dynamically generated by concatenating two strings    var suffix     name    var person           first    suffix    Nicholas         last    suffix    Zakas      console log person  first name              Nicholas  console log person  last name               Zakas    This is called computed property names

User · Answer

Whenever you need to access property dynamically you have to use square bracket for accessing property not     operator  Syntax  object propery    x000D   x000D  const something     bar   Foobar      x000D  const foo    bar   x000D     something foo  -- not correct way at it is expecting foo as proprty in  something   foo   value    x000D     correct way is  something foo  x000D  alert  something foo   x000D   x000D   x000D

User · Answer

It gets interesting when you have to pass parameters to this function as well   Code jsfiddle  var obj    method function p1 p2 p3  console log  method   arguments     var str    method  p1    p2    p3      var match   str match    s   S            s       var func   match 1  var parameters   match 2  split       for var i   0  i  lt  parameters length    i         clean up param begninning     parameters i    parameters i  replace    s                  clean up param end   parameters i    parameters i  replace        s            obj func  parameters      sends parameters as array obj func  apply this  parameters      sends parameters as individual values

User · Answer

I came across a case where I thought I wanted to pass the  address  of an object property as data to another function and populate the object  with AJAX   do lookup from address array  and display in that other function  I couldn t use dot notation without doing string acrobatics so I thought an array might be nice to pass instead  I ended-up doing something different anyway  but seemed related to this post   Here s a sample of a language file object like the one I wanted data from   const locs        audioPlayer          controls            start    start          stop    stop              heading    Use controls to start and stop audio           I wanted to be able to pass an array such as    audioPlayer    controls    stop   to access the language text   stop  in this case   I created this little function that looks-up the  least specific   first  address parameter  and reassigns the returned object to itself  Then it is ready to look-up the next-most-specific address parameter if one exists   function getText selectionArray  obj      selectionArray forEach key   gt        obj   obj key           return obj      usage      returns  stop     console log getText   audioPlayer    controls    stop    locs         returns  use controls to start and stop audio      console log getText   audioPlayer    heading    locs

User · Answer

Finding Object by reference without  strings  Note make sure the object you pass in is cloned   i use cloneDeep from lodash for that if object looks like const obj    data    an Object   person   name   first  nick   last  gray       path looks like const objectPath     data  1  person  name   last    then call below method and it will return the sub object by path given const child   findObjectByPath obj  objectPath  alert  child     alerts  quot last quot    const findObjectByPath    objectIn  any  path  any      gt        let obj   objectIn     for  let i   0  i  lt   path length - 1  i              const item   path i             keep going up to the next parent         obj   obj item     this is by reference           return obj

User · Answer

You can do it like this using Lodash get    get object   a 0  b c

User · Answer

const something     bar   Foobar      const foo    bar    something     foo

User · Answer

UPDATED  I have take comments below into consideration and agreed  Eval is to be avoided   Accessing root properties in object is easily achieved with obj variable   but getting nested complicates thing  Not to write already written code I suggest to use lodash get   Example     Accessing root property var rootProp    rootPropert     get object  rootProp  defaultValue       Accessing nested property var listOfNestedProperties    var1  var2     get object  listOfNestedProperties     Lodash get can be used on different ways  here is link to the documentation lodash get

User · Answer

ES5    Check Deeply Nested Variables  This simple piece of code can check for deeply nested variable   value existence without having to check each variable along the way      var getValue   function  s  context        return Function call  context    null   return     s          Ex  - a deeply nested array of objects   a                  b                              a   1               b                                            c   1                      d   2      we want to check for this                                                                   Instead of    if a  amp  amp  a 0   amp  amp  a 0  b  amp  amp  a 0  b 0   amp  amp  a 0  b 0  b  amp  amp  a 0  b 0  b 0   amp  amp  a 0  b 0  b 0  d  amp  amp  a 0  b 0  b 0  d    2       true   We can now    if  getValue  a 0  b 0  b 0  d      2      true   Cheers

User · Answer

This is my solution   function resolve path  obj        return path split      reduce function prev  curr            return prev   prev curr    null        obj    self      Usage examples   resolve  document body style width      or resolve  style width   document body     or even use array indexes     someObject has been defined in the question  resolve  part 0 size   someObject      returns null when intermediate properties are not defined  resolve  properties that do not exist    hello  world

User · Answer

I asked a question that kinda duplicated on this topic a while back  and after excessive research  and seeing a lot of information missing that should be here  I feel I have something valuable to add to this older post    Firstly I want to address that there are several ways to obtain the value of a property and store it in a dynamic Variable  The first most popular  and easiest way IMHO would be    let properyValue   element style  enter-a-property      however I rarely go this route because it doesn t work on property values assigned via style-sheets  To give you an example  I ll demonstrate with a bit of pseudo code    let elem   document getElementById  someDiv     let cssProp   elem style  width       Using the code example above  if the width property of the div element that was stored in the  elem  variable was styled in a CSS style-sheet  and not styled inside of its HTML tag  you are without a doubt going to get a return value of undefined stored inside of the cssProp variable  The undefined value occurs because in-order to get the correct value  the code written inside a CSS Style-Sheet needs to be computed in-order to get the value  therefore  you must use a method that will compute the value of the property who s value lies within the style-sheet    Henceforth the getComputedStyle   method    function getCssProp      let ele   document getElementById  test      let cssProp   window getComputedStyle ele null  getPropertyValue  width         W3Schools getComputedValue Doc This gives a good example  and lets you play with it  however  this link Mozilla CSS getComputedValue doc talks about the getComputedValue function in detail  and should be read by any aspiring developer who isn t totally clear on this subject    As a side note  the getComputedValue method only gets  it does not set  This  obviously is a major downside  however there is a method that gets from CSS style-sheets  as well as sets values  though it is not standard Javascript  The JQuery method         selector  css property value       does get  and does set  It is what I use  the only downside is you got to know JQuery  but this is honestly one of the very many good reasons that every Javascript Developer should learn JQuery  it just makes life easy  and offers methods  like this one  which is not available with standard Javascript  Hope this helps someone

User · Answer

There are two ways to access properties of an object   Dot notation  something bar Bracket notation  something  bar    The value between the brackets can be any expression  Therefore  if the property name is stored in a variable  you have to use bracket notation   x000D   x000D  var something       bar   foo     var foo    bar       both x   something foo  and something foo    x work as expected console log something foo    console log something bar  x000D   x000D   x000D

[javascript] Dynamically access object property using variable

Examples related to javascript

Examples related to object

Examples related to properties