Is there anyway, either natively or through a library, to use autovivification on Javascript objects?
IE, assuming foo is an object with no properties, being able to just do foo.bar.baz = 5 rather than needing foo.bar = {}; foo.bar.baz = 5.
You can't do it exactly with the syntax you want. But as usual, in JS you can write your own function:
function set (obj,keys,val) {
for (var i=0;i<keys.length;i++) {
var k = keys[i];
if (typeof obj[k] == 'undefined') {
obj[k] = {};
}
obj = obj[k];
}
obj = val;
}
so now you can do this:
// as per you example:
set(foo,['bar','baz'],5);
without worrying if bar or baz are defined. If you don't like the [..] in the function call you can always iterate over the arguments object.
Purely natively, I don't think so. undefined isn't extensible or changeable and that's about the only way I could imagine doing it without passing it through a function.
I had a desire to do this, so I wrote a package to handle it.
% npm install autovivify
% node
> Av = require('autovivify')
> foo = new Av()
{}
> foo.bar.baz = 5
5
> foo
{ bar: { baz: 5 } }
>
It'll even do arrays with numeric subscripts:
> foo = new Av()
> foo.bar.baz[0] = 'hum'
> foo
{ bar: { baz: [ 'hum' ] } }
Or you can use an eval-based solution. It's ugly, not recommended.
function av(xpr) {
var res = "";
var pos = 0;
while (true) {
var pos = xpr.indexOf("[",pos);
if (pos == -1) break;
var frag = xpr.substr(0,pos);
pos++;
res += "if (typeof(" + frag + ") != 'object') " + frag + " = {};\n";
} // while
return res + xpr;
} // av()
function main() {
var a = {};
a["keep"] = "yep";
eval(av('a[1][1]["xx"] = "a11xx"; '));
eval(av('a[1][2]["xx"] = "a12xx"; '));
console.log(a);
} // main()
#slebetman's code doesn't seem to work. The last key should not be assigned an empty object, but rather the val. This code worked:
function autoviv(obj,keys,val) {
for (var i=0; i < keys.length; i++) {
var k = keys[i];
if (typeof obj[k] === 'undefined') {
if(i === keys.length-1) {
obj[k] = val;
return;
}
obj[k] = {};
}
obj = obj[k];
}
}
foo = {}
autoviv(foo,['bar','baz'],5);
console.log(foo.bar.baz);
5
Related
I'm trying to create a JS object dynamically providing a key and a value. The key is in dot notation, so if a string like car.model.color is provided the generated object would be:
{
car: {
model: {
color: value;
}
}
}
The problem has a trivial solution if the key provided is a simple property, but i'm struggling to make it work for composed keys.
My code:
function (key, value) {
var object = {};
var arr = key.split('.');
for(var i = 0; i < arr.length; i++) {
object = object[arr[i]] = {};
}
object[arr[arr.length-1]] = value;
return object;
}
your slightly modified code
function f(key, value) {
var result = object = {};
var arr = key.split('.');
for(var i = 0; i < arr.length-1; i++) {
object = object[arr[i]] = {};
}
object[arr[arr.length-1]] = value;
return result;
}
In the loop you should set all of the props but the last one.
Next set the final property and all set.
If you're using lodash you could use _.set(object, path, value)
const obj = {}
_.set(obj, "car.model.color", "my value")
console.log(obj)
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.15/lodash.min.js"></script>
Use namespace pattern, like the one Addy Osmani shows: http://addyosmani.com/blog/essential-js-namespacing/
Here's the code, pasted for convenience, all credit goes to Addy:
// top-level namespace being assigned an object literal
var myApp = myApp || {};
// a convenience function for parsing string namespaces and
// automatically generating nested namespaces
function extend( ns, ns_string ) {
var parts = ns_string.split('.'),
parent = ns,
pl, i;
if (parts[0] == "myApp") {
parts = parts.slice(1);
}
pl = parts.length;
for (i = 0; i < pl; i++) {
//create a property if it doesnt exist
if (typeof parent[parts[i]] == 'undefined') {
parent[parts[i]] = {};
}
parent = parent[parts[i]];
}
return parent;
}
// sample usage:
// extend myApp with a deeply nested namespace
var mod = extend(myApp, 'myApp.modules.module2');
function strToObj(str, val) {
var i, obj = {}, strarr = str.split(".");
var x = obj;
for(i=0;i<strarr.length-1;i++) {
x = x[strarr[i]] = {};
}
x[strarr[i]] = val;
return obj;
}
usage: console.log(strToObj("car.model.color","value"));
I would use a recursive method.
var createObject = function(key, value) {
var obj = {};
var parts = key.split('.');
if(parts.length == 1) {
obj[parts[0]] = value;
} else if(parts.length > 1) {
// concat all but the first part of the key
var remainingParts = parts.slice(1,parts.length).join('.');
obj[parts[0]] = createObject(remainingParts, value);
}
return obj;
};
var simple = createObject('simple', 'value1');
var complex = createObject('more.complex.test', 'value2');
console.log(simple);
console.log(complex);
(check the console for the output)
Here's a recursive approach to the problem:
const strToObj = (parts, val) => {
if (!Array.isArray(parts)) {
parts = parts.split(".");
}
if (!parts.length) {
return val;
}
return {
[parts.shift()]: strToObj(parts, val)
};
}
I wanna set the value in a JSON using a path string like this "a.0.b" for a JSON that looks like this:
{
a: [
{
b: 'c'
}
]
}
I came up with this solution but I wonder if there is a simpler way to write this:
function setValue(path, value, json) {
var keys = path.split('.');
_.reduce(keys, function(obj, key, i) {
if (i === keys.length - 1) {
obj[key] = value;
} else {
return obj[key];
}
}, json);
}
so calling setValue('a.0.b', 'd', {a:[{b:'c'}]}) would change the json to {a:[{b:'d'}]}
Here's a solution. I benchmarked the two possible solutions and it seems looping over object and path is faster than using the reduce function. See the JSPerf tests here: http://jsperf.com/set-value-in-json-by-a-path-using-lodash-or-underscore
function setValue(path, val, obj) {
var fields = path.split('.');
var result = obj;
for (var i = 0, n = fields.length; i < n && result !== undefined; i++) {
var field = fields[i];
if (i === n - 1) {
result[field] = val;
} else {
if (typeof result[field] === 'undefined' || !_.isObject(result[field])) {
result[field] = {};
}
result = result[field];
}
}
}
I've got an empty object and a string:
var obj = {};
var str = "a.b.c";
Is there a way I can turn this into
obj = { a: { b: { c: { } } } }
I can't quite wrap my head around this one and I'm not even sure if it would be possible.
var obj = {};
var str = "a.b.c";
var arr = str.split('.');
var tmp = obj;
for (var i=0,n=arr.length; i<n; i++){
tmp[arr[i]]={};
tmp = tmp[arr[i]];
}
ES6:
let str = "a.b.c",
arr = str.split('.'),
obj, o = obj = {};
arr.forEach(key=>{o=o[key]={}});
console.log(obj);
ES6/Reduced (array storage unnecessary):
let str = "a.b.c", obj, o = obj = {};
str.split('.').forEach(key=>o=o[key]={});
console.log(obj);
ES6/Array.prototype.reduce:
let str = "a.b.c", last;
let obj = str.split('.').reduce((o, val) => {
if (typeof last == 'object')
last = last[val] = {};
else
last = o[val] = {};
return o;
}, {});
console.log(obj);
This is from the yui2 yahoo.js file.
YAHOO.namespace = function() {
var a=arguments, o=null, i, j, d;
for (i=0; i<a.length; i=i+1) {
d=(""+a[i]).split(".");
o=YAHOO;
// YAHOO is implied, so it is ignored if it is included
for (j=(d[0] == "YAHOO") ? 1 : 0; j<d.length; j=j+1) {
o[d[j]]=o[d[j]] || {};
o=o[d[j]];
}
}
return o;
};
See the source for documentation.
https://github.com/yui/yui2/blob/master/src/yahoo/js/YAHOO.js
This recursive function returns you the string representation of the desired object
//Usage: getObjectAsString('a.b.c'.split(/\./))
function getObjectAsString (array){
return !array.length ? '{}'
: '{"' + array[0] + '":' + getObjectAsString (array.slice(1)) + '}';
}
Now you can convert the output of getObjectAsString into object using
JSON.parse(getObjectAsString('a.b.c'.split(/\./)))
EDIT: Removed 'Input as String' version as it works only for single letter subparts in the namespace such as the one given in the question (a.b.c) which is generally not the case.
Here you go:
var string = "a.b.c",
array = string.split('.');
JSON.parse("{\"" + array.join('": {\"') + "\": {" +array.map(function () {return '}'}).join('') + "}")
Example
Here's my take on it:
function ensureKeys(str, obj) {
for(var parts = str.split('.'), i=0, l=parts.length, cache=obj; i<l; i++) {
if(!cache[parts[i]]) {
cache[parts[i]] = {};
}
cache = cache[parts[i]];
}
return obj;
}
var obj = {};
ensureKeys('a.b.c', obj);
// obj = { a: { b: { c: {} } } }
I'm having an issue with trying to populate a multidimensional object in javascript before all of the dimensions are defined.
For example this is what I want to do:
var multiVar = {};
var levelone = 'one';
var leveltwo = 'two';
multiVar[levelone][leveltwo]['levelthree'] = 'test'
It would be extremely cumbersome to have to create each dimension with a line like this:
var multiVar = {};
multiVar['levelone'] = {};
multiVar['levelone']['leveltwo'] = {};
multiVar['levelone']['leveltwo']['levelthree'] = 'test'
The reason why I need to do it without iterative priming is because I don't know how many dimensions there will be nor what the keys it will have. It needs to be dynamic.
Is there a way to do that in a dynamic way?
You could write a function which ensures the existence of the necessary "dimensions", but you won't be able to use dot or bracket notation to get this safety. Something like this:
function setPropertySafe(obj)
{
function isObject(o)
{
if (o === null) return false;
var type = typeof o;
return type === 'object' || type === 'function';
}
if (!isObject(obj)) return;
var prop;
for (var i=1; i < arguments.length-1; i++)
{
prop = arguments[i];
if (!isObject(obj[prop])) obj[prop] = {};
if (i < arguments.length-2) obj = obj[prop];
}
obj[prop] = arguments[i];
}
Example usage:
var multiVar = {};
setPropertySafe(multiVar, 'levelone', 'leveltwo', 'levelthree', 'test');
/*
multiVar = {
levelone: {
leveltwo: {
levelthree: "test"
}
}
}
*/
Not an expert on the old JS so here goes
I have
store1.baseParams.competition = null;
store2.baseParams.competition = null;
store3.baseParams.competition = null;
What I want to do is
for (i=1; 1<=3; 1++) {
store + i +.baseParams.competition = null;
}
Hope that makes sense what I want to do - is it possible
Basically make a variable / object by adding to it
Cheers
One way to accomplish this is via eval() - (usually a Very Bad Idea)
for (var i=1; i<=3; i++) {
eval("store" + i + ".baseParams.competition = null;");
}
Another, more complex but relatively efficient way would be to create a function which gives you the ability to mutate arbitrarily deep object hierarchies dynamically at run-time. Here's one such function:
/*
Usage:
Nested objects:
nested_object_setter(object, ['property', 'propertyOfPreviousProperty'], someValue);
Top-level objects:
nested_object_setter(object, 'property', someValue);
*/
function dynamic_property_setter_base(obj, property, value, strict) {
var shouldPerformMutation = !strict || (strict && obj.hasOwnProperty(property));
if(shouldPerformMutation) {
obj[property] = value;
}
return value;
}
function dynamic_property_setter(obj, property, value) {
return dynamic_property_setter_base(obj, property, value, false);
}
function nested_object_setter(obj, keys, value) {
var isArray = function(o) {
return Object.prototype.toString.call(o) === '[object Array]';
};
//Support nested keys.
if(isArray(keys)) {
if(keys.length === 1) {
return nested_object_setter(obj, keys[0], value);
}
var o = obj[keys[0]];
for(var i = 1, j = keys.length - 1; i < j; i++)
o = o[keys[i]];
return dynamic_property_setter(o, keys[keys.length - 1], value);
}
if(keys != null &&
Object.prototype.toString.call(keys) === '[object String]' &&
keys.length > 0) {
return dynamic_property_setter(obj, keys, value);
}
return null;
}
Your code would look like this:
for(var i = 1; i <= 3; i++)
nested_object_setter(this, ['store' + i, 'baseParams', 'competition'], null);
Here's another example, running in the JS console:
> var x = {'y': {'a1': 'b'}};
> var i = 1;
> nested_object_setter(this, ['x','y','a' + i], "this is \"a\"");
> x.y.a1
"this is "a""
Another way to do it, IMHO this is the simplest but least extensible way:
this['store' + i].baseParams.competition = null;
That won't work. You can make an object though, storing the 'store'+i as a property.
var storage = {},i=0;
while(++i<4) {
storage['store' + i] = { baseParams: { competition:null } };
}
Console.log(String(storage.store1.baseParams.competition)); //=> 'null'
In a browser, you can also use the window namespace to declare your variables (avoiding the use of eval):
var i=0;
while(++i<4) {
window['store' + i] = { baseParams: { competition:null } };
}
Console.log(String(store1.baseParams.competition)); //=> 'null'
for (i=1; i<=3; i++) {
this["store" + i + ".baseParams.competition"] = null;
}
Just another form of assigning variables in JS.