Object nested property access - javascript

I'm trying to write a function that adds an accessor for each nested property in an object. To make this a bit clearer, given object o, and a string representing a path, I should be able to access the property at that path as a named property:
var o = {
child1: "foo",
child2: {
child1: "bar",
child2: 1
child3: {
child1: "baz"
}
}
};
addAccessors(o);
o["child2.child1"]; // "bar"
o["child2.child2"]; // 1
o["child2.child3.child1"]; // "baz"
Note that the names won't always be as uniform.
Here is what I have so far:
function addAccessors(parent) {
function nestedProps(o, level) {
if (typeof o == "object") {
var level = level || "";
for (p in o) {
if (o.hasOwnProperty(p)) {
if (level && typeof(o[p]) != "object") {
parent[level + "." + p] = o[p];
}
nestedProps(o[p], (level ? level + "." : "") + p);
}
}
}
}
nestedProps(parent);
}
As you can see from this line: obj[level + "." + p] = o[p];, I am simply adding the values as new properties onto the array.
What I would like to be able to do is add an accessor that retrieves the value from the appropriate property, so that it is "live". To refer to my earlier example:
o["child2.child2"]; // 1
o["child2"]["child2"] = 2;
o["child2.child2"]; // Still 1, but I want it to be updated
Any ideas on how I can accomplish this?

This is not possible with browsers that are in use nowadays. There is no way to assign a callback or similar to the assignment. Instead use a function to fetch the value in real time:
o.get=function(path)
{
var value=this;
var list=path.split(".");
for (var i=0; i<list.length; i++)
{
value=value[list[i]];
if (value===undefined) return undefined;
}
return value;
}
o.get("child2.child1");

Related

Shorthand to manipulate an object attribute and reassign

I have a deeply nested object and I want to manipulate a value of it and reassign it again. Is there a shorthand way for this other than writing it all out again or assigning it to a variable:
createStops[idx]['place']['create'][stop][key][value] = createStops[idx]['place']['create'][stop][key][value].toString()
looks ugly doesn't it? Something like:
createStops[idx]['place']['create'][stop][key][value].toStringAndReassign()
but JS built in.
Edit: In my case it is a number, if it's for your case too please check out #MarkMeyer answer.
No, there isn't.
Assigning a new value requires an assignment.
Strings are immutable, so you can't convert an existing value into a string in-place.
Given a value that's a number, if you just want it to be a string, you can coerce to a string with an assignment operator:
let o = {
akey: {
akey:{
value: 15
}
}
}
o.akey.akey.value += ''
console.log(o)
No,
Going to the same index is needed to store the value
Although it is not possible as mentioned by #Quentin you can define a custom getter in your object like:
var foo = {
a: 5,
b: 6,
get c () {
return this.b.toString()+' text'
}
};
console.log(foo.c);
You're not reassigning the value as you are semantically formatting your values. In order to format your value you are mutating your initial object. If you do not pretend to modify an object for formatting purposes that will work just fine.
You do not have integrated functions to use like that, but you could use of some utilitary functions of your own to help you manage assignements and make it less verbal.
SPOIL : The final use look like
// call the function to do +1 at the specified key
executeFunctionAtKey(
// The object to change the value on
createStops,
// The path
`${idx}.place.create.${stop}.${key}.${value}`,
// The thing to do
(x) => x + 1,
);
const createStops = {
idx: {
place: {
create: {
stop: {
key: {
value: 5,
},
},
},
},
},
};
const idx = 'idx';
const stop = 'stop';
const key = 'key';
const value = 'value';
// Function that go to the specified key and
// execute a function on it.
// The new value is the result of the func
// You can do your toString there, or anything else
function executeFunctionAtKey(obj, path, func) {
const keys = path.split('.');
if (keys.length === 1) {
obj[path] = func(obj[key]);
return obj;
}
const lastPtr = keys.slice(0, keys.length - 1).reduce((tmp, x) => tmp[x], obj);
lastPtr[keys[keys.length - 1]] = func(lastPtr[keys[keys.length - 1]]);
return obj;
}
// call the function to do +1 at the specified key
executeFunctionAtKey(
// The object to change the value on
createStops,
// The path
`${idx}.place.create.${stop}.${key}.${value}`,
// The thing to do
(x) => x + 1,
);
console.log(createStops);
with the toString example from Number to String
const createStops = {
idx: {
place: {
create: {
stop: {
key: {
value: 5,
},
},
},
},
},
};
const idx = 'idx';
const stop = 'stop';
const key = 'key';
const value = 'value';
// Function that go to the specified key and
// execute a function on it.
// The new value is the result of the func
// You can do your toString there, or anything else
function executeFunctionAtKey(obj, path, func) {
const keys = path.split('.');
if (keys.length === 1) {
obj[path] = func(obj[key]);
return obj;
}
const lastPtr = keys.slice(0, keys.length - 1).reduce((tmp, x) => tmp[x], obj);
lastPtr[keys[keys.length - 1]] = func(lastPtr[keys[keys.length - 1]]);
return obj;
}
// call the function to do +1 at the specified key
executeFunctionAtKey(
// The object to change the value on
createStops,
// The path
`${idx}.place.create.${stop}.${key}.${value}`,
// The thing to do
(x) => x.toString(),
);
console.log(createStops);
Theoretically you could build a function that takes an object, a path and the property to set it to.
This will reduce the readability of your code, so i would advice using ordinary assignment. But if you need it check out the snippet below:
//
function setProp(object, path, val) {
var parts = path.split("/").filter(function (p) { return p.length > 0; });
var pathIndex = 0;
var currentTarget = object;
while (pathIndex < parts.length - 1) {
currentTarget = currentTarget[parts[pathIndex]];
pathIndex++;
}
if (val instanceof Function) {
currentTarget[parts[pathIndex]] = val(currentTarget[parts[pathIndex]]);
}
else {
currentTarget[parts[pathIndex]] = val;
}
return object;
}
var createStops = {
idx: {
place: {
create: {
stop: {
key: {
value: 5
}
}
}
}
}
};
function toString(p) { return p.toString(); }
console.log(JSON.stringify(createStops, null, 4));
setProp(createStops, 'idx/place/create/stop/key/value', toString);
console.log(JSON.stringify(createStops, null, 4));
UPDATE 1
Allowed passing functions and used OP JSON structure for snippet

Find specific property inside an object

I have an object. I want to check if a specific property exists in it or not.
The issue is: the property that I am looking for, could be anywhere, i.e: the structure of the object is undefiend.
ex:
obj1 = { "propIWant": "xyz" }
obj2 = { "prop1": [ {"key": "value"}, {"key":"value"}, 1, {"key": { "propIWant": "xyz"}}]
I've tried the following, but it seems to fail:
var lastTry = function(entry){
// if entry is an array
if(typeof entry === 'object' && entry instanceof Array){
for(var i in entry)
entry[i] = this.lastTry(entry[i]);
}
// if entry is a normal object
else if(typeof entry === 'object'){
// iterate through the properties of the entry
for(var key in entry){
console.log('key is: ', entry[key])
// in case the entry itself is an array
if(typeof entry[key] === 'object' && entry[key] instanceof Array){
for(var i in entry[key]){
entry[key][i] = this.lastTry(entry[key][i]);
}
}
// in case the entry is a simple object
else if(typeof entry[key] === 'object') {
console.log('entry[key] is an object', entry[key], key)
// if we directely find the property.. modify it
if(entry[key].hasOwnProperty('_internal_url')){
**entry[key]['_internal_url'] = "http://localhost:4000"+entry[key]['_internal_url'];** <-- My objective
}
else{
// call this method again on that part
// for(var i in entry[key]){
// if(typeof entry[key][i] === 'object')
// entry[key][i] = this.lastTry(entry[key][i]);
// }
}
}else{
console.log('not found')
}
}
}
}
Can someone please help me out with it?I found the following: Find by key deep in a nested object but, instead of returning the found part, I want to edit the property and return the entire object with the modified property, not just the subset of the object that has that property.
Have you tried :
obj1.hasOwnProperty('propIWant')
If you wish to just check if property exists or not, you can stringify the object and then check if value exists in string or not.
var obj2 = {
"prop1": [{
"key": "value"
}, {
"key": "value"
},
1, {
"key": {
"propIWant": "xyz"
}
}
]
}
var key = 'propIWant';
var key2 = 'propIWant1';
function isPropInObject(obj, prop) {
var r = new RegExp(prop + "\":")
var match = JSON.stringify(obj).match(r);
return match && match.length > 0 ? true : false
}
console.log(isPropInObject(obj2, key))
console.log(isPropInObject(obj2, key2))
Arrays and objects data can be access in a common way:
obj[key] and arr[pos];
This way you can simplify your code. Please note that key can be a string in case of a object or a number in case of an array.
The version below only searches in the element and eventual children elements(both arrays and objects) in a depth-first logic.
var found = 0;
var findProp = function(entry) {
if(typeof entry === 'object')
for(var key in entry) {
findProp(entry[key]);
if( entry[key].hasOwnProperty('_internal_url')) {
found++;
entry[key]['_internal_url'] = "http://localhost:4000" + entry[key]['_internal_url'];
}
}
}
console.log('found ' + found + 'occurrences');
Well, check if the props is objects themselves and use a recursive function to find the "deep" property you are looking for?
function findProp(obj, lookFor) {
for (var prop in obj) {
if (prop == lookFor) return obj[prop]
if (typeof obj[prop] == 'object') {
var checkNested = findProp(obj[prop], lookFor)
if (checkNested) return checkNested
}
}
return false
}
It works with console.log(findProp(obj2, 'propIWant'))
demo -> http://jsfiddle.net/zqcurg70/

How to get a nested property for an object dynamically?

I need to create a function that search a property in an object and returns its value.
Object could have an arbitrary structure with property nested in other objects.
How could I change my script?
var item = {
id: 10,
properties: {
parent_id: 20,
x: {
y: 100
}
}
}
function getValue(what) {
console.log(item[what]);
}
getValue('id');
// ok return 10
getValue('properties.parent_id')
// undefined - ISSUE here I would like to have returned 20
You can provide a syntax to access these properties in the getValue function parameter. For example, to access properties.parent_id you can use 'properties.parent_id'.
Then the getValue function should be written as the following:
function getValue(prop) {
if (typeof(prop) !== 'string')
throw 'invalid input string';
props = prop.split('.');
var value = item[props[0]];
for(var i = 1, l = props.length; i < l; i++) {
value = value[props[i]];
}
return value;
}
Example:
getValue('properties.parent_id'); //returns 20
You need to create a "path", i.e. a sequence, of keys too access in order. One way is to choose an uncommong separator that is never going to be used for object keys, e.g. |:
element = obj;
path.split("|").forEach(function(key){
element = element[key];
});
if you cannot exclude any char from the keys then supporting escaping is mandatory; for example you could use , to separate keys but allowing #, to mean a comma is part of the key and ## meaning an at-sign is part of the key.
element = obj;
(path+",").match(/([^#,]|#.)*,/g).forEach(function(x){
element = element[x.slice(0,-1).replace(/#(.)/g, "$1")];
});
for example the path "1,2,x,y#,z,,w##" can be used to access
obj[1][2].x["y,z"][""]["w#"]
The code below makes flat obj so to access like that.
var flatten = function(obj,into,prefix){
into = into ||{};
prefix = prefix || '';
_.each(obj,function(val,key){
if(obj.hasOwnProperty(key)){
if(val && typeof val === 'object'){
flatten(val,into,prefix + key + '.');
}else{
into[prefix + key] = val;
}
}
});
return into;
};
The working JSFiddle is here http://jsfiddle.net/fper2d73/
The complete code is
var item = {
id: 10,
properties: {
parent_id: 20,
x: {
y: 100
}
}
}
var flatten = function(obj,into,prefix){
into = into ||{};
prefix = prefix || '';
_.each(obj,function(val,key){
if(obj.hasOwnProperty(key)){
if(val && typeof val === 'object'){
flatten(val,into,prefix + key + '.');
}else{
into[prefix + key] = val;
}
}
});
return into;
};
var _item = flatten(item);
function getValue(what) {
console.log(_item[what]);
}
getValue('id');
// returns 10
getValue('properties.parent_id')
// returns 20
getValue('properties.x.y')
//returns 100
for a deeply nested object you can use a recursive function to retrieve all the object which are nested inside parent Object.It can be applied to an object literal having three to more number of nested object
var parentObj = {
parentProp: 10,
childObj: {
childProp: 20,
grandChildObj: {
y: {
z:'lol',
places:['newyork','canada','dhaka']
}
}
}
}
var arr=[];
var container=[];
container.push(parentObj);
var count=0;
function getObjNum(obj){ //<= recursive function to retrieve all the nested objects inside parent object
var prop=Object.getOwnPropertyNames(obj);
for(i=0;i<prop.length;i++){
if(typeof(obj[prop[i]])=='object'){
if(!Array.isArray(obj[prop[i]])){
container.push(obj[prop[i]]);
count++;
getObjNum(obj[prop[i]]); // recursive call to getObjNum
}
}
}
}
getObjNum(parentObj); // sent the parent object to getObjNum
function getVal(str){
var split=str.split('.');
container.forEach(function(obj){
if(obj.hasOwnProperty(split[split.length-1])){
console.log(obj[split[split.length-1]]);
}
});
}
getVal('parentObj.parentProp');
getVal('y.z');

JS reference multi-layered dynamic object string

Suppose I have a string that references a deep Javascript object, such as:
var string = 'response.basicInfo.gender';
I want to build a function that safely checks if that object exists, by splitting the string by .s and building the object, checking each level as it goes, and then dealing with the value of the object, if it actually exists.
var parseHelper = function(response, items) {
for (item in items) {
var parts = String(item).split('.');
for (var i = 0; i < parts.length; ++i) {
// ... etc. build the string
}
}
}
parseHelper(response, {
'basicInfo.gender': function(val){
return (val == 'M') ? 'Male' : (val == 'F') ? 'Female' : val;
},
})
While the above function is incomplete, let's suppose we use it to build the string and check if each exists:
// so let's suppose we build the string:
var builtString = "response['basicInfo']";
// Now we want to check if it exists
if (response['basicInfo']) {
// And if we are fine that it exists, go on to the next item
var builtString = "response['basicInfo']['gender']";
// etc.
}
I don't have a problem building that function, I just don't know how to evaluate a string like "response['basicInfo']['gender']" and turn it into an actual reference to the object. My only guess would be eval(), but eval is evil...
Update
I know you can reference a global object by going window['blah'], but this response object I want to reference is not in the global scope, so do I use this? And even if I can do this, how do I reference it with multiple layers?
Plus 1 to Bergi, who linked to a page with six links, one of which had an answer I adapted to solve the problem:
Convert JavaScript string in dot notation into an object reference
Here's the full solution.
// We want to run a parse function to convert
// the object response.basicInfo.gender (which is 'M')
// to 'Male', etc.
// Sets the value of a string representing a deep object.
setDeep: function(root, path, value) {
var parts = path.split('.'), obj = root;
for (var i = 0; i < parts.length - 1; ++i) {
obj = obj[parts[i]] || { };
}
obj[parts[parts.length - 1]] = value;
return obj;
},
// Gets the value of a string representing a deep object.
getDeep: function(root, path) {
var parts = path.split('.'), obj = root, target;
for (var i = 0; i < parts.length; ++i) {
target = obj[parts[i]];
if (typeof target == "undefined") return void 0;
obj = target;
}
return obj;
},
// Loops through multiple string representations
// of deep objects and runs the values through
// assigned parsing functions for each of them,
// returning the root object.
parseHelper: function(obj, items) {
for (item in items) {
var val = getDeep(obj, item);
var func = items[item];
if (val !== undefined) {
val = func(val);
}
setDeep(obj, item, val);
}
return obj;
},
// response.basicInfo.gender = 'M';
// response.foo.bar = true;
response = parseHelper(response, {
'basicInfo.gender': function(val){
return (val == 'M') ? 'Male' : (val == 'F') ? 'Female' : val;
},
'foo.bar': function(val) {
return (val) ? false : true;
},
});
// response.basicInfo.gender = 'Male';
// response.foo.bar = false;

How to search for a specific int or string within an object?

I have a large object and am looking to find a generated number within the object without knowing it's path or location. How can I search for either the property or just the value or even a bool?
i.e. an object that has objects where a property 'version' has the value of '90'
var objy = {
example: 'unknown0',
example1: 'unknown1',
example2: 'unknown2',
example3: 'unknown3',
example4: 'unknown4',
example5: {
prop1: 1,
prop2: 2,
prop3: 3,
prop4: 4,
prop5: {
etc1: true,
etc2: false,
etc4: {
version: 90
}
}
}
}
http://jsfiddle.net/J5Avu/
Is this even possible without know the 'tree' before-hand?
Heres a function that basically looks through the object's properties recursively looking for the propertyName/propertyValue combination and keeps track of the "path" as it goes (jsfiddle). It returns null if it didn't find it.
function findPropertyAndValueInObject( obj, prop, value, path ) {
if( obj[prop] === value ) {
return path;
}
else {
var foundPath = null;
for( var thisProp in obj ) {
var propValue = obj[thisProp];
if( typeof(propValue) === "object" ) {
foundPath = findPropertyAndValueInObject(propValue, prop, value, path + "." + thisProp);
if( foundPath !== null ) {
break;
}
}
}
return foundPath;
}
}
console.log( findPropertyAndValueInObject( objy, "version", 90, "objy" ) );
//prints out "objy.example5.prop5.etc4"
This function find the value of a property of the given object, matching at the given string path. Here you'll find a fiddle of it with your data, then here a usage into wJs library. Below, there is the stand alone version.
For your usage object_find('example5.prop5.etc4.version', object); will return 90
/**
* Find data into an object using string path
* like : "my.needle.name" into "haystack"
* #param path
* #param object object
* #returns {*}
*/
function object_find(path, object) {
var base = object, item;
path = path.split('.');
while (path.length > 0) {
item = path.shift();
if (base.hasOwnProperty(item)) {
base = base[item];
if (path.length === 0) {
return base;
}
}
}
return false;
}

Categories