Accessing nested JavaScript objects and arrays by string path

Question

I have a data structure like this :

var someObject = {
    'part1' : {
        'name': 'Part 1',
        'size': '20',
        'qty' : '50'
    },
    'part2' : {
        'name': 'Part 2',
        'size': '15',
        'qty' : '60'
    },
    'part3' : [
        {
            'name': 'Part 3A',
            'size': '10',
            'qty' : '20'
        }, {
            'name': 'Part 3B',
            'size': '5',
            'qty' : '20'
        }, {
            'name': 'Part 3C',
            'size': '7.5',
            'qty' : '20'
        }
    ]
};

And I would like to access the data using these variable :

var part1name = "part1.name";
var part2quantity = "part2.qty";
var part3name1 = "part3[0].name";

part1name should be filled with someObject.part1.name 's value, which is "Part 1". Same thing with part2quantity which filled with 60.

Is there anyway to achieve this with either pure javascript or JQuery?

Not sure what you are asking here? You want to be able to query part1.name and have the text "part1.name" returned? Or you want a means to get the value stored within part1.name? — BonyT
– BonyT, Commented Jun 27, 2011 at 10:27
have you tried doing like var part1name = someObject.part1name; ` — Rafay
– Rafay, Commented Jun 27, 2011 at 10:29
@BonyT : I want to query someObject.part1.name and return the value of it ("Part 1"). However, I want the query (I called it "the key") to be stored in a variable 'part1name'. Thanks for your reply. @3nigma : I have certainly do. But that is not my intention. Thanks for the reply. — Komaruloh
– Komaruloh, Commented Jun 27, 2011 at 10:42
in the duplicate answer, i love fyr's answer stackoverflow.com/questions/8817394/… — Steve Black
– Steve Black, Commented Mar 20, 2013 at 2:09
See also Convert JavaScript string in dot notation into an object reference — Bergi
– Bergi, Commented Dec 15, 2015 at 12:45

Mohamad Hamouday · Accepted Answer · 2018-11-29 08:15:51Z

Inspired by @webjay's answer: https://stackoverflow.com/a/46008856/4110122

I made this function which can you use it to Get/ Set/ Unset any value in object

function Object_Manager(obj, Path, value, Action) 
{
    try
    {
        if(Array.isArray(Path) == false)
        {
            Path = [Path];
        }

        let level = 0;
        var Return_Value;
        Path.reduce((a, b)=>{
            level++;
            if (level === Path.length)
            {
                if(Action === 'Set')
                {
                    a[b] = value;
                    return value;
                }
                else if(Action === 'Get')
                {
                    Return_Value = a[b];
                }
                else if(Action === 'Unset')
                {
                    delete a[b];
                }
            } 
            else 
            {
                return a[b];
            }
        }, obj);
        return Return_Value;
    }

    catch(err)
    {
        console.error(err);
        return obj;
    }
}

To use it:

 // Set
 Object_Manager(Obj,[Level1,Level2,Level3],New_Value, 'Set');

 // Get
 Object_Manager(Obj,[Level1,Level2,Level3],'', 'Get');

 // Unset
 Object_Manager(Obj,[Level1,Level2,Level3],'', 'Unset');

SBUK-Tech · Accepted Answer · 2019-05-31 14:39:27Z

Extension of Mohamad Hamouday' Answer will fill in missing keys

function Object_Manager(obj, Path, value, Action, strict) 
{
    try
    {
        if(Array.isArray(Path) == false)
        {
            Path = [Path];
        }

        let level = 0;
        var Return_Value;
        Path.reduce((a, b)=>{
            console.log(level,':',a, '|||',b)
            if (!strict){
              if (!(b in a)) a[b] = {}
            }


            level++;
            if (level === Path.length)
            {
                if(Action === 'Set')
                {
                    a[b] = value;
                    return value;
                }
                else if(Action === 'Get')
                {
                    Return_Value = a[b];
                }
                else if(Action === 'Unset')
                {
                    delete a[b];
                }
            } 
            else 
            {
                return a[b];
            }
        }, obj);
        return Return_Value;
    }

    catch(err)
    {
        console.error(err);
        return obj;
    }
}

Example


obja = {
  "a": {
    "b":"nom"
  }
}

// Set
path = "c.b" // Path does not exist
Object_Manager(obja,path.split('.'), 'test_new_val', 'Set', false);

// Expected Output: Object { a: Object { b: "nom" }, c: Object { b: "test_new_value" } }

Community · Accepted Answer · 2020-06-20 09:12:55Z

AngularJS has `$scope.$eval`

With AngularJS, one can use the $scope.$eval method to access nested objects:

$scope.someObject = someObject;
console.log( $scope.$eval("someObject.part3[0].name") ); //Part 3A

For more information, see

AngularJS $scope API Reference - $eval

The DEMO

angular.module("app",[])
.run(function($rootScope) {
     $rootScope.someObject = {
         'part2' : {
              'name': 'Part 2',
              'size': '15',
              'qty' : '60'
         },
         'part3' : [{
              'name': 'Part 3A',
              'size': '10',
              'qty' : '20'
         },{
              name: 'Part 3B'           
         }]
     };
     console.log(
         "part3[0].name =",
         $rootScope.$eval("someObject.part3[0].name")
    );
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app"
</body>

Ben Aston · Accepted Answer · 2020-10-20 14:03:25Z

1

Note that the following will not work for all valid unicode property names (but neither will any of the other answers as far as I can tell).

const PATTERN = /[\^|\[|\.]([$|\w]+)/gu

function propValue(o, s) {
    const names = []
    for(let [, name] of [...s.matchAll(PATTERN)]) 
        names.push(name)
    return names.reduce((p, propName) => {
        if(!p.hasOwnProperty(propName)) 
            throw 'invalid property name'
        return p[propName]
    }, o)
}

let path = 'myObject.1._property2[0][0].$property3'
let o = {
    1: {
        _property2: [
            [{
                $property3: 'Hello World'
            }]
        ]
    }
}
console.log(propValue(o, path)) // 'Hello World'

answered Oct 20, 2020 at 14:03

Ben Aston

56k69 gold badges221 silver badges351 bronze badges

Comments

vincent · Accepted Answer · 2021-01-20 19:30:45Z

Using object-scan this becomes a one liner. However more importantly this solution considers performance:

input traversed once during search (even if multiple keys are queried)
parsing only happens once on init (in case multiple objects are queried)
allow for extended syntax using *

// const objectScan = require('object-scan');

const someObject = { part1: { name: 'Part 1', size: '20', qty: '50' }, part2: { name: 'Part 2', size: '15', qty: '60' }, part3: [{ name: 'Part 3A', size: '10', qty: '20' }, { name: 'Part 3B', size: '5', qty: '20' }, { name: 'Part 3C', size: '7.5', qty: '20' }] };

const get = (haystack, needle) => objectScan([needle], { rtn: 'value', abort: true })(haystack);

console.log(get(someObject, 'part1.name'));
// => Part 1
console.log(get(someObject, 'part2.qty'));
// => 60
console.log(get(someObject, 'part3[0].name'));
// => Part 3A

const getAll = (haystack, ...needles) => objectScan(needles, { reverse: false, rtn: 'entry', joined: true })(haystack);

console.log(getAll(someObject, 'part1.name', 'part2.qty', 'part3[0].name'));
/* =>
[ [ 'part1.name', 'Part 1' ],
  [ 'part2.qty', '60' ],
  [ 'part3[0].name', 'Part 3A' ] ]
 */

console.log(getAll(someObject, 'part1.*'));
/* =>
[ [ 'part1.name', 'Part 1' ],
  [ 'part1.size', '20' ],
  [ 'part1.qty', '50' ] ]
 */

.as-console-wrapper {max-height: 100% !important; top: 0}

<script src="https://bundle.run/[email protected]"></script>

Disclaimer: I'm the author of object-scan

timebandit · Accepted Answer · 2021-12-07 13:33:19Z

1

My solution is based on that given by @AdrianoSpadoni and addresses a need to clone the object

function generateData(object: any, path: string, value: any): object {
  const clone = JSON.parse(JSON.stringify(object));
  path
    .split(".")
    .reduce(
    (o, p, i) => (o[p] = path.split(".").length === ++i ? value : o[p] || {}),
  clone
);
  return clone;
}

answered Dec 7, 2021 at 13:33

timebandit

8483 gold badges12 silver badges27 bronze badges

Comments

Reza Attar · Accepted Answer · 2022-07-02 11:39:42Z

I've looked on all the other answers, decided to add improvements into more readable code:

function getObjectValByString(obj, str) {
if (typeof obj === "string") return obj;

const fields = str.split(".");

return getObjectValByString(obj[fields[0]], fields.slice(1).join("."));}

heres a code snippet:

let someObject = {
    partner: {
        id: "AIM",
        person: {
            name: "ANT",
            an: { name: "ESM" },
        },
    },
};

function getObjectValByString(obj, str) {
    if (typeof obj === "string") return obj;

    const fields = str.split(".");

    return getObjectValByString(obj[fields[0]], fields.slice(1).join("."));
}

const result = getObjectValByString(someObject, "partner.person.an.name");
console.log({
    result,
});

Aral Roca · Accepted Answer · 2023-08-17 10:16:01Z

Another solution:

export function getNestedFieldByStringKey(obj, path) {
  const squareBracketsRgx = /\[(\w|'|")*\]/g
  const squareBracketsToDot = (sb: string) => `.${sb.replace(/\[|\]|'|"/g, '')}`
  const parts = path
    .replace(squareBracketsRgx, squareBracketsToDot)
    .split('.')

  return parts.reduce((o, part) => o?.[part], obj)
}

And these are some tests:

describe('getNestedFieldByStringKey', () => {
    it('should return the nested field using "." as separator', () => {
      const input = {
        some: {
          example: {
            nested: true
          }
        }
      }

      expect(getNestedFieldByStringKey(input, 'some.example.nested')).toBe(true)
    })

    it('should return the nested field using "." and "[]" as separator', () => {
      const input = {
        some: {
          example: {
            nested: [{ test: true }]
          }
        }
      }

      expect(getNestedFieldByStringKey(input, 'some["example"].nested[0].test')).toBe(true)
    })

    it('should return undefined if does not exist', () => {
      const input = {}

      expect(getNestedFieldByStringKey(input, 'some["example"].nested[0].test')).toBe(undefined)
    })
})

Jonan Gueorguiev · Accepted Answer · 2013-12-04 19:54:04Z

0

What about this solution:

setJsonValue: function (json, field, val) {
  if (field !== undefined){
    try {
      eval("json." + field + " = val");
    }
    catch(e){
      ;
    }
  }  
}

And this one, for getting:

getJsonValue: function (json, field){
  var value = undefined;
  if (field !== undefined) {
    try {
      eval("value = json." + field);
    } 
    catch(e){
      ;
    }
  }
  return value;
};

Probably some will consider them unsafe, but they must be much faster then, parsing the string.

answered Dec 4, 2013 at 19:54

Jonan Gueorguiev

1,21613 silver badges21 bronze badges

1 Comment

nanobar Over a year ago

+1, This is a totally valid answer when the performance matters and you can create the getter functions ahead of time and guarantee that the strings are safe. Although I would use new Function which is a slightly safer as it can't access variables outside of it's scope. We are talking 10x faster per lookup.

ayushgp · Accepted Answer · 2016-06-23 09:45:46Z

The solutions here are just for accessing the deeply nested keys. I needed one for accessing, adding, modifying and deleting the keys. This is what I came up with:

var deepAccessObject = function(object, path_to_key, type_of_function, value){
    switch(type_of_function){
        //Add key/modify key
        case 0: 
            if(path_to_key.length === 1){
                if(value)
                    object[path_to_key[0]] = value;
                return object[path_to_key[0]];
            }else{
                if(object[path_to_key[0]])
                    return deepAccessObject(object[path_to_key[0]], path_to_key.slice(1), type_of_function, value);
                else
                    object[path_to_key[0]] = {};
            }
            break;
        //delete key
        case 1:
            if(path_to_key.length === 1){
                delete object[path_to_key[0]];
                return true;
            }else{
                if(object[path_to_key[0]])
                    return deepAccessObject(object[path_to_key[0]], path_to_key.slice(1), type_of_function, value);
                else
                    return false;
            }
            break;
        default:
            console.log("Wrong type of function");
    }
};

path_to_key: path in an array. You can replace it by your string_path.split(".").
type_of_function: 0 for accessing(dont pass any value to value), 0 for add and modify. 1 for delete.

Tamb · Accepted Answer · 2017-08-15 21:40:23Z

Building off of Alnitak's answer:

if(!Object.prototype.byString){
  //NEW byString which can update values
Object.prototype.byString = function(s, v, o) {
  var _o = o || this;
      s = s.replace(/\[(\w+)\]/g, '.$1'); // CONVERT INDEXES TO PROPERTIES
      s = s.replace(/^\./, ''); // STRIP A LEADING DOT
      var a = s.split('.'); //ARRAY OF STRINGS SPLIT BY '.'
      for (var i = 0; i < a.length; ++i) {//LOOP OVER ARRAY OF STRINGS
          var k = a[i];
          if (k in _o) {//LOOP THROUGH OBJECT KEYS
              if(_o.hasOwnProperty(k)){//USE ONLY KEYS WE CREATED
                if(v !== undefined){//IF WE HAVE A NEW VALUE PARAM
                  if(i === a.length -1){//IF IT'S THE LAST IN THE ARRAY
                    _o[k] = v;
                  }
                }
                _o = _o[k];//NO NEW VALUE SO JUST RETURN THE CURRENT VALUE
              }
          } else {
              return;
          }
      }
      return _o;
  };

}

This allows you to set a value as well!

I've created an npm package and github with this as well

Jodo · Accepted Answer · 2017-10-25 08:12:18Z

Instead of a string an array can be used adressing nested objects and arrays e.g.: ["my_field", "another_field", 0, "last_field", 10]

Here is an example that would change a field based on this array representation. I am using something like that in react.js for controlled input fields that change the state of nested structures.

let state = {
        test: "test_value",
        nested: {
            level1: "level1 value"
        },
        arr: [1, 2, 3],
        nested_arr: {
            arr: ["buh", "bah", "foo"]
        }
    }

function handleChange(value, fields) {
    let update_field = state;
    for(var i = 0; i < fields.length - 1; i++){
        update_field = update_field[fields[i]];
    }
    update_field[fields[fields.length-1]] = value;
}

handleChange("update", ["test"]);
handleChange("update_nested", ["nested","level1"]);
handleChange(100, ["arr",0]);
handleChange('changed_foo', ["nested_arr", "arr", 3]);
console.log(state);

Aakash · Accepted Answer · 2018-06-22 11:49:45Z

0

Working with `Underscore`'s `property` or `propertyOf`:

var test = {
  foo: {
    bar: {
      baz: 'hello'
    }
  }
}
var string = 'foo.bar.baz';


// document.write(_.propertyOf(test)(string.split('.')))

document.write(_.property(string.split('.'))(test));

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

Good Luck...

answered Jun 22, 2018 at 11:49

Aakash

24.1k7 gold badges110 silver badges89 bronze badges

Comments

ThatGuyRob · Accepted Answer · 2019-10-20 22:41:47Z

React example - Using lodash

This may not be the most efficient way, from a performance perspective, but if your app is some monolith it sure as heck will save you some time. Especially, when you are tightly coupling your state data format to an API back-end.

   import set from "lodash/set";  // More efficient import

    class UserProfile extends Component {

      constructor(props){
        super(props);

        this.state = {
          user: {
            account: {
              id: "",
              email: "",
              first_name: ""
            }
          }
        }
      }

       /**
       * Updates the state based on the form input
       * 
       * @param {FormUpdate} event 
       */
      userAccountFormHook(event) {
        // https://lodash.com/docs#get
        // https://lodash.com/docs#set
        const { name, value } = event.target;
        let current_state = this.state
        set(current_state, name, value)  // Magic happens here
        this.setState(current_state);
      }

    render() {
        return (
          <CustomFormInput
            label: "First Name"
            type: "text"
            placeholder: "First Name"
            name: "user.account.first_name"
            onChange: {this.userAccountFormHook}
            value: {this.state.user.account.first_name}

          />
      )
  }
}

jumpjack · Accepted Answer · 2019-11-28 13:38:11Z

Starting from @Alnitak answer I built this source, which downloads an actual .JSON file and processes it, printing to console explanatory strings for each step, and more details in case of wrong key passed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script>
function retrieveURL(url) {
        var client = new XMLHttpRequest();
        prefix = "https://cors-anywhere.herokuapp.com/"
        client.open('GET', prefix + url);
        client.responseType = 'text';
        client.onload = function() {
            response = client.response; // Load remote response.
            console.log("Response received.");
            parsedJSON  = JSON.parse(response);
            console.log(parsedJSON);
            console.log(JSONitemByPath(parsedJSON,"geometry[6].obs[3].latituade"));
            return response;
        };
        try {
            client.send();
        } catch(e) {
            console.log("NETWORK ERROR!");
            console.log(e);
        }
}



function JSONitemByPath(o, s) {
    structure = "";
    originalString = s;
    console.log("Received string: ", s);
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    console.log("Converted to   : ", s);
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');

    console.log("Single keys to parse: ",a);

    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
            console.log("object." + structure +  a[i], o);
            structure +=  a[i] + ".";
        } else {
            console.log("ERROR: wrong path passed: ", originalString);
            console.log("       Last working level: ", structure.substr(0,structure.length-1));
            console.log("       Contents: ", o);
            console.log("       Available/passed key: ");
            Object.keys(o).forEach((prop)=> console.log("       "+prop +"/" + k));
            return;
        }
    }
    return o;
}


function main() {
    rawJSON = retrieveURL("http://haya2now.jp/data/data.json");
}

</script>
  </head>
  <body onload="main()">
  </body>
</html>

Output example:

Response received.
json-querier.html:17 {geometry: Array(7), error: Array(0), status: {…}}
json-querier.html:34 Received string:  geometry[6].obs[3].latituade
json-querier.html:36 Converted to   :  geometry.6.obs.3.latituade
json-querier.html:40 Single keys to parse:  (5) ["geometry", "6", "obs", "3", "latituade"]
json-querier.html:46 object.geometry (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
json-querier.html:46 object.geometry.6 {hayabusa2: {…}, earth: {…}, obs: Array(6), TT: 2458816.04973593, ryugu: {…}, …}
json-querier.html:46 object.geometry.6.obs (6) [{…}, {…}, {…}, {…}, {…}, {…}]
json-querier.html:46 object.geometry.6.obs.3 {longitude: 148.98, hayabusa2: {…}, sun: {…}, name: "DSS-43", latitude: -35.4, …}
json-querier.html:49 ERROR: wrong path passed:  geometry[6].obs[3].latituade
json-querier.html:50        Last working level:  geometry.6.obs.3
json-querier.html:51        Contents:  {longitude: 148.98, hayabusa2: {…}, sun: {…}, name: "DSS-43", latitude: -35.4, …}
json-querier.html:52        Available/passed key: 
json-querier.html:53        longitude/latituade
json-querier.html:53        hayabusa2/latituade
json-querier.html:53        sun/latituade
json-querier.html:53        name/latituade
json-querier.html:53        latitude/latituade
json-querier.html:53        altitude/latituade
json-querier.html:18 undefined

adjwilli · Accepted Answer · 2023-08-01 17:17:45Z

After reading through the other answers, I believe the most performant and concise way of replacing _.get() and _.set() is by making a module with the following:

let rgxBracketToDot;

export function sanitizePath (path) {
    path = path || [];
    return Array.isArray(path) ? path : path.replace(rgxBracketToDot || (rgxBracketToDot = /\[(\w+)\]/g), '.$1').split('.');
}

export function get (obj, path) {
    if (!obj || typeof obj !== 'object') {
        return;
    }
    return sanitizePath(path).reduce((acc, val) => acc && acc[val], obj);
}

export function set (obj, path, value) {
    const [current,...rest] = sanitizePath(path);
    rest.length >= 1 ? set(obj[current] = obj[current] || {}, rest, value) : obj[current]= value;
    return obj;
}

To maintain full compatibility with lodash, two additional .replace() calls could be included in sanitizePath() to remove leading and trailing dots (.):

path = path.replace(/^\./, '');
path = path.replace(/\.$/, '');

This should be done in a similar way to rgxBracketToDot so that the regex is only set once.

If you have full control over the path arguments, you could also make the code more performant by only using array paths and removing sanitizeString() altogether.

Collectives™ on Stack Overflow

Accessing nested JavaScript objects and arrays by string path

46 Answers 46

Comments

Comments

AngularJS has `$scope.$eval`

The DEMO

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Working with `Underscore`'s `property` or `propertyOf`:

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

46 Answers 46

Comments

Comments

AngularJS has $scope.$eval

The DEMO

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Working with Underscore's property or propertyOf:

Comments

Comments

Comments

Comments

Linked

Related

AngularJS has `$scope.$eval`

Working with `Underscore`'s `property` or `propertyOf`: