Related
I have code like this.
var key = "anything";
var object = {
key: "key attribute"
};
I want to know if there is a way to replace that key with "anything".
like
var object = {
"anything": "key attribute"
};
In ES6, use computed property names.
const key = "anything";
const object = {
[key]: "key attribute"
// ^^^^^ COMPUTED PROPERTY NAME
};
Note the square brackets around key. You can actually specify any expression in the square brackets, not just a variable.
Yes. You can use:
var key = "anything";
var json = { };
json[key] = "key attribute";
Or simply use your second method if you have the values at hand when writing the program.
On modern Javascript (ECMAScript 6) you can sorround the variable with square brackets:
var key = "anything";
var json = {
[key]: "key attribute"
};
This should do the trick:
var key = "anything";
var json = {};
json[key] = "key attribute";
Solution:
var key = "anything";
var json = {};
json[key] = "key attribute";
Recently needed a solution how to set cookies passing the dynamic json key values.
Using the https://github.com/js-cookie/js-cookie#json, it can be done easily.
Wanted to store each selected option value of user in cookie, so it's not lost in case of tab or browser shutting down.
var json = {
option_values : {}
};
$('option:selected').each(function(index, el) {
var option = $(this);
var optionText = option.text();
var key = 'option_' + index;
json.option_values[key] = optionText;
Cookies.set('option_values', json, { expires: 7 } );
});
Then you can retrieve each cookie key value on each page load using
Cookies.getJSON('option_values');
Closures work great for this.
function keyValue(key){
return function(value){
var object = {};
object[key] = value;
return object;
}
}
var key = keyValue(key);
key(value);
Well, there isn't a "direct" way to do this...
but this should do it:
json[key] = json.key;
json.key = undefined;
Its a bit tricky, but hey, it works!
I've got a JSON object whose keys have dots in their names. I need to replace the dots with 'DOT' (for example).
{
"key1.key": "merciful",
"key2": {
"key2.key": "grateful"
}
}
So, key1.key converts to key1DOTkey
Using the approach suggested in Change key name in nested JSON structure I used the reviver parameter of JSON.Parse, which works like a charm to replace anything within the key name, except for dots: when replacing dots, it truncates the object.
This code replaces all "e" and works fine
var parseE = JSON.parse(obj, function (k, v) {
if (k.search(".") != -1)
this[k.replace(/e/g, 'DOT')] = v;
else
return v;
});
returns
{
"kDOTy1.kDOTy": "merciful",
"kDOTy2": {
"kDOTy2.kDOTy": "grateful"
}
}
But if I try to replace the dot ".", then the object truncates
var parseDOT = JSON.parse(obj, function (k, v) {
if (k.search(".") != -1)
this[k.replace(/\./g, 'DOT')] = v;
else
return v;
});
returns the first key-value pair, well replaced, but nothing else:
{
"key1DOTkey": "merciful"
}
I have tried using replaceAll and even creating a function replacing the characters one by one to avoid using regex in case that was the origin. Nothing, same outcome.
Here's a fiddle: https://jsfiddle.net/dpiret/dgk5fp16/7/
Note: replacing all dots from the stringified object won't work for me because it would replace the dots within values as well.
I would much appreciate any indication
search uses regular expressions (so . matches any character!), just use string methods like indexOf
var obj = `{
"key1.key": "merciful",
"key2": {
"key2.key": "grateful"
},
"key3": {
"key3.keyA.keyB": "thankful"
}
}`
var parseDOT = JSON.parse(obj, function (k, v) {
let key = k;
if (key.indexOf(".") != -1){
while(key.indexOf(".") != -1)
key = key.replace(".","DOT");
this[key] = v;
}
else
return v;
});
console.log(parseDOT)
I'm sorry that I'm struggling to explain why the above works. What I can tell you is your original solution matched every key - what is not clear is why it didnt just update every property with a no-op for those without a dot.
Replace will work - this one does not touch the values
const str = `{
"key1.key": "merciful",
"key2": {
"key2.key": "grateful.dead"
},
"key3": {
"key3.key.key": "text.text"
}
}`
const str1 = str.replace(/"(\w+\.\w+)+":/g,function(match) { return match.replace(/\./g,"DOT")})
const obj = JSON.parse(str1);
console.log(obj);
Checking "text.text": as value
const str = `{
"key1.key": "merciful",
"key2": {
"key2.key": "grateful.dead"
},
"key3": {
"key3.key.key": "text.text"
}
}`
const obj = JSON.parse(str);
console.log(obj);
obj["key3"]["key3.key.key"] = `"text.text":`
console.log(obj);
let str1 = JSON.stringify(obj)
console.log(str1);
str1 = str1.replace(/"(\w+\.\w+)+":/g,function(match) { return match.replace(/\./g,"DOT")})
console.log(str1);
const obj1 = JSON.parse(str1)
console.log(obj1)
Recently I've found that I have had to create a object from attributes on a HTML tag. I am doing this in a AngularJS environment, so hyphenated attributes are converted to camelCase, but I could also do the same using data- attributes and dataset
So for example I have:
<element person-name="Grant" animation-jump="123" />
Which gives the object
{
"personName" : "Grant",
"animationJump" : "123"
{
My problem is that I then want to convert that camelCase object into a structured object:
{
"person" : {
"name" : "Grant" },
"animation" : {
"jump" : "123" }
}
I've created a JSFiddle of my QUint Unit Test https://jsfiddle.net/gdt3bonw/
It's actually working for the case I want which is only 1 level, but I would like to get it working for any number of levels because I foresee that it will be needed and so I can release the code publicly.
We will loop through the keys of the object using reduce, building up the result. We decompose each key into its components, such as personName into person and name. We loop over these components, creating subobjects if they do not already exist. Finally, we add the final component to the innermost subobject as a property with the value in question.
Object.keys(input).reduce((result, key) => {
var parts = key.match( /(^|[A-Z])[a-z]+/g) . map(part => part.toLowerCase());
var leaf = parts.pop();
var obj = result;
parts.forEach(part => obj = obj[part] = obj[part] || {});
obj[leaf] = input[key];
return result;
}, {});
You can't use that in this way, and I don't think that it would be a logic proposal. Below I explain why it wouldn't.
obj[["animation","jump"]] = "123"
replace it with
obj["animation"]["jump"] = "123"
and it's all fine.
Why I don't support your idea?
It's messy to use, there is no style in doing that.
There is no logic in using an array as an object key
There is another way of calling an object item by key: using a dot, and that won't support your idea. I think everyone can imagine why.
Why do you need to convert the attribute to camelCase in the first place..? Just do
function arrayToStructuredObject(obj,props){
if (props.length){
obj[props[0]] = props.length > 1 ? {} : value;
arrayToStructuredObject(obj[props.shift()],props);
}
return obj;
}
var props = "animation-jump-tremendous-pinky".split("-"),
value = "123",
obj = {},
sobj = {};
sobj = arrayToStructuredObject(obj, props);
Besides i would like to remind that using the bracket notation to create a property is only possible if the reference that the bracket notation is used upon is predefined as an object. Such as
var o1; // <- undefined
o1["myProp"] = 1; // Uncaught TypeError: Cannot set property 'myProp' of undefined
while
var o2 = {}; // Object {}
o2["myProp"] = 1; // <- 1
then again
o2["myProp"]["myOtherProp"] = 2; // <- 2 but won't type coerce o2.myProp to Object
So speaking of proposals, i am not sure if utilizing bracket notation directly over undefined variables yet as another object creation pattern makes sense or not.
Well in any case one complete solution would be
var inp = {"personName" : "Grant", "animationJump" : "123", "fancyGirlTakesARide" : "987"},
result = Object.keys(inp).reduce(function(p,c,i){
var props = c.replace(/[A-Z]/g, m => "-" + m.toLowerCase()).split("-");
return arrayToStructuredObject(p,props,inp[c])
},{});
function arrayToStructuredObject(obj,props,val){
if (props.length){
obj[props[0]] = props.length > 1 ? {} : val;
arrayToStructuredObject(obj[props.shift()],props,val);
}
return obj;
}
Though I loved the method of splitting the camelCase props by a look-ahead (/?=[A-Z]/) it takes an extra job of lower casing the whole array of prop strings regardless they are already lowercase or not. So i guess this might be slightly faster. (..or not due to the recursive nature of it)
This is not the best solution, but you can actually use arrays as key, in this particular situation, by converting them to a string:
obj[["animation","Jump"].join()] = "123";
This will work with your original object.
A solution, which uses Regex to split camel case string.
var obj = { "animationsJump": "123", "animationsRun": "456", "animationsHide": "789", "personName": "Grant", "personPetsDog": "Snowy", "personPetsCat": "Snowball" },
newObject = {};
Object.keys(obj).forEach(function (k) {
var path = k.split(/(?=[A-Z])/).map(function (s) {
return s.toLowerCase();
}),
last = path.pop();
path.reduce(function (r, a) {
r[a] = r[a] || {};
return r[a];
}, newObject)[last] = obj[k];
});
document.write('<pre>' + JSON.stringify(newObject, 0, 4) + '</pre>');
suppose i receive JSON object from the server as this
{ "asdf[zxcv]": "qwer" }
how do i access asdf, zxcv, and qwer in javascript, so i can use the object this way ?
theobj.asdf[zxcv] = 'qwer'
Bracket notation is not in the JSON RFC. You can only read it as string.
var simpleObj = {
"simpleKey": "simpleValue"
}
console.log(simpleObj)
var advObj = {
"advKey[1]": "advValue"
}
console.log(JSON.parse(advObj)); // SyntaxError
console.log(advObj.advKey[1]) // TypeError
console.log(advObj["advKey[1]"]) // can only read as string
You would need to refactor the source JSON into something more meaningful so you can access the values in regular JavaScript way.
Run the following snippet to check how you can solve the issue:
var x = '{ "asdf[zxcv]": "qwer" }';
var y = JSON.parse(x);
var result = Object.keys(y).reduce(function(result, key) {
var parentKey = key.substring(0, key.indexOf("["));
var innerKey = /[a-z]+\[([a-z]+)\]/i.exec(key)[1];
if (!result.hasOwnProperty(key))
result[parentKey] = {};
result[parentKey][innerKey] = y[key];
return result;
}, {});
document.getElementById("structure").textContent = JSON.stringify(result);
var zxcv = result["asdf"]["zxcv"];
document.getElementById("someValue").textContent = zxcv;
<h2>Refactored data structure as nested objects:</h2>
<div id="structure"></div>
<h2>Accessing some value: result["asdf"]["zxcv"] or result.asdf.zxcv</h2>
<div id="someValue"></div>
It's all about creating nested objects to represent the associative keys in the source JSON properties representing a conceptual associative array...
This is one of the way to access all elements without reconstructing object.
jQuery.each(JSON.parse('{ "asdf[zxcv]": "qwer" }'), function(index, value) {
var i = index;// i = "asdf[zxcv]"
var v = value;// v = "qwer"
var iOfInnerValue = (/\[(.*?)\]/g).exec(i)[1];// innerValue = "zxcv"
var iOfOuterValue = index.replace("["+(/\[(.*?)\]/g).exec(i)[1]+"]",""); // outerValue = "asdf"
});
You'll need to assign the data to a variable and then you can use Object keys to get the key which is the part before the :. Here's an example.
var j = { "asdf[zxcv]": "qwer" };
console.log(Object.keys(j)); //["asdf[zxcv]"]
console.log(j); //{asdf[zxcv]: "qwer"}
How do I add new attribute (element) to JSON object using JavaScript?
JSON stands for JavaScript Object Notation. A JSON object is really a string that has yet to be turned into the object it represents.
To add a property to an existing object in JS you could do the following.
object["property"] = value;
or
object.property = value;
If you provide some extra info like exactly what you need to do in context you might get a more tailored answer.
var jsonObj = {
members:
{
host: "hostName",
viewers:
{
user1: "value1",
user2: "value2",
user3: "value3"
}
}
}
var i;
for(i=4; i<=8; i++){
var newUser = "user" + i;
var newValue = "value" + i;
jsonObj.members.viewers[newUser] = newValue ;
}
console.log(jsonObj);
A JSON object is simply a javascript object, so with Javascript being a prototype based language, all you have to do is address it using the dot notation.
mything.NewField = 'foo';
With ECMAScript since 2015 you can use Spread Syntax ( …three dots):
let people = { id: 4 ,firstName: 'John'};
people = { ...people, secondName: 'Fogerty'};
It's allow you to add sub objects:
people = { ...people, city: { state: 'California' }};
the result would be:
{
"id": 4,
"firstName": "John",
"secondName": "Forget",
"city": {
"state": "California"
}
}
You also can merge objects:
var mergedObj = { ...obj1, ...obj2 };
thanks for this post. I want to add something that can be useful.
For IE, it is good to use
object["property"] = value;
syntax because some special words in IE can give you an error.
An example:
object.class = 'value';
this fails in IE, because "class" is a special word. I spent several hours with this.
You can also use Object.assign from ECMAScript 2015. It also allows you to add nested attributes at once. E.g.:
const myObject = {};
Object.assign(myObject, {
firstNewAttribute: {
nestedAttribute: 'woohoo!'
}
});
Ps: This will not override the existing object with the assigned attributes. Instead they'll be added. However if you assign a value to an existing attribute then it would be overridden.
extend: function(){
if(arguments.length === 0){ return; }
var x = arguments.length === 1 ? this : arguments[0];
var y;
for(var i = 1, len = arguments.length; i < len; i++) {
y = arguments[i];
for(var key in y){
if(!(y[key] instanceof Function)){
x[key] = y[key];
}
}
};
return x;
}
Extends multiple json objects (ignores functions):
extend({obj: 'hej'}, {obj2: 'helo'}, {obj3: {objinside: 'yes'}});
Will result in a single json object
You can also dynamically add attributes with variables directly in an object literal.
const amountAttribute = 'amount';
const foo = {
[amountAttribute]: 1
};
foo[amountAttribute + "__more"] = 2;
Results in:
{
amount: 1,
amount__more: 2
}
You can also add new json objects into your json, using the extend function,
var newJson = $.extend({}, {my:"json"}, {other:"json"});
// result -> {my: "json", other: "json"}
A very good option for the extend function is the recursive merge. Just add the true value as the first parameter (read the documentation for more options). Example,
var newJson = $.extend(true, {}, {
my:"json",
nestedJson: {a1:1, a2:2}
}, {
other:"json",
nestedJson: {b1:1, b2:2}
});
// result -> {my: "json", other: "json", nestedJson: {a1:1, a2:2, b1:1, b2:2}}
Uses $.extend() of jquery, like this:
token = {_token:window.Laravel.csrfToken};
data = {v1:'asdass',v2:'sdfsdf'}
dat = $.extend(token,data);
I hope you serve them.
Following worked for me for add a new field named 'id'.
Angular Slickgrid usually needs such id
addId() {
this.apiData.forEach((item, index) => {
item.id = index+1;
});