How to set a JSON array key on array.push on JavaScript - javascript

I'm making some JS code, where I need to set a variable as a key in a JSON array with Javascript array.push():
var test = 'dd'+questNumb;
window.voiceTestJSON.push({test:{"title":""}, "content":{"date":""}});
Where questNumb is another variable. When doing that code, the part where I just write the test variable it just becomes to the key "test", so I have no idea of getting this to wok. How could it be? Thanks!

If you want variables as keys, you need brackets:
var object = {};
object['dd'+questNumb] = {"title":""};
object["content"] = {"date":""}; //Or object.content, but I used brackets for consistency
window.voiceTestJSON.push(object);

You'd need to do something like this:
var test = "dd" + questNumb,
obj = {content: {date: ""}};
// Add the attribute under the key specified by the 'test' var
obj[test] = {title: ""};
// Put into the Array
window.voiceTestJSON.push(obj);

(First of all, you don't have a JSON array, you have a JavaScript object. JSON is a string representation of data with a syntax that looks like JavaScript's object literal syntax.)
Unfortunately when you use JavaScript's object literal syntax to create an object you can not use variables to set dynamic property names. You have to create the object first and then add the properties using the obj[propName] syntax:
var test = "dd" + questNumb,
myObj = { "content" : {"date":""} };
myObj[test] = {"title" : ""};
window.voiceTestJSON.push(myObj);

{test:{"title":""}, "content":{"date":""}}
this is a JS object. So you are pushing an object into the voiceTestJSON array.
Unlike within JSON, JS Object property names can be written with or without quotes.
What you want to do can be achieved like this:
var test = 'dd'+questNumb;
var newObject = {"content":{"date":""}}; //this part does not need a variable property name
newObject[test] = {"title":""};
This way you are setting the property with the name contained in test to {"title":""}.

Related

JS. Object in array?

I'm learning js, find this code:
var arr = [
{id: 111, now: '12.02.2014'}
];
What is this? I know that var arr = [ ... ] - array, but what is {} in array and how i can work with this data and display this ?
{} is the syntax for creating an object. It's called an object initializer, but it's frequently called an "object literal".
So what you're doing there is creating an object which has id and now properties, and putting that object into an array as its only entry.
...how i can work with this data and display this ?
To display the id, for instance:
console.log(arr[0].id);
What that does:
arr[0] - retrieve the first entry in the array. In our case, it's an object.
.id - Get the value of the id property from that object.
We could also write it like this:
var obj = arr[0];
console.log(obj.id);
Alternately, if we didn't know in advance what property we wanted but we were given a string containing the name of the property, we could use [] with the object as well:
var nameOfProperty = "id";
var obj = arr[0];
console.log(obj[nameOfProperty]);
JavaScript has both the dotted syntax (obj.id), and the bracketed syntax (obj["id"]) for accessing object properties, where with the latter you can use any string (including one from a variable).
Yes, that is an object inside an array. In truth, all values, from numbers to functions to arrays, are actually objects.
You can access this object in the same way as you would any item of an array. (arr[0])
You can then access properties of the object, for example arr[0].id.
For more about objects, take a look at Objects on MDN.

Why this Variable does not pass correctly in JQuery

I have a simple JQuery Statement...and my question is, why in the world does one of these fail?
Lets assume the variable colorAttribute is color
$(thisCLass).css( "color", '#'+hex ); // Works when written
$(thisCLass).css( colorAttribute, '#'+hex ); // Works with variable
$(thisCLass).css({ "color" : '#'+hex }); // Works when written
$(thisCLass).css({ colorAttribute : '#'+hex }); // Does not Work with variable
Any ideas as to why the one fails?
That's because you can't use a variable to specify a name in an object literal.
An identifier in an object literal can be written with or without quotes, so it won't be interpreted as a variable in either case. The object will end up with the identifier that you specify:
{ "colorAttribute" : '#'+hex }
You can use a variable to set a property in an object, but then you have to create the object first and use the bracket syntax:
var obj = {};
obj[colorAttribute] = '#'+hex;
$(thisCLass).css(obj);
because the second one becomes an object with just one property: "colorAttribute".
you should do this:
myobj = {};
myobj[collorAttribute] = "#"+hex;
$(thisClass).css(myobj);
perhaps you're a python programmer, but javascript is not like that regarding dicts (objects here). it happens often.
Object literals/initializers take identifier keys just for their name, not for any values they may represent as a variable. So...
{ colorAttribute: '#' + hex }
...defines an Object with a key named "colorAttribute".
You'll have to use bracket notation to name a key based on a variable:
var css = {};
css[colorAttribute] = '#' + hex;
$(thisClass).css(css);
It doesn't work because you simply cannot do that in JavaScript. In an object literal, the left side of a property declaration is either a string literal or an identifier. If it's an identifier, then the identifier itself is used as if it were a string literal.
You can create an object however and populate a property from a variable:
var cssProps = {};
cssProps[colorAttribute] = '#' + hex;
$(thisClass).css(cssProps);
You can't declare a javascript object literal with a variable for the property name. A property name in a literal must be the actual property name, not a variable.
Instead, if you want to use a variable in the object form, you'd have to construct the object first and then pass it in:
var obj = {};
obj[colorAttribute] = '#'+hex;
$(thisCLass).css(obj);
When you are doing { colorAttribute : '#'+hex } you are creating a new object with a property named "colorAttribute".
I don't know exactly what you need but you could try
var cssObject = {};
cssObject[colorAttribute] = '#'+hex;
//cssObject[otherAttribute] = 'otherValue';
$(thisCLass).css(cssObject);
Hope this was helpfull.
You need a step before writing what you are trying to do here:
First create a variable:
var color = new Object();
color.colorAttribute = '#'+hex
$(thisCLass).css(color);

Use key's value as key in key-value pair in Javascript

How can you use the value of a key-value pair as the key in a different key-value pair in javascript?
I'd like to do the following:
var gizmos = {gizmo1: "G1"};
var things = {gizmos.gizmo1: "T1"};
So that things essentially equals:
var things = {"G1": "T1"};
Like this:
var gizmos = {gizmo1: "G1"};
var things = {};
things[gizmos.gizmo1] = "T1";
There's no way to do it as part of the object initializer (aka object "literal"), you have to do it after.
The reason it works is that in JavaScript, you can access (get or set) a property on an object in two ways: Either using dotted notation and a literal, e.g. foo.bar, or using bracketed notation and a string, e.g. foo["bar"]. In the latter case, the string doesn't have to be a string literal, it can be the result of any expression (including, in this case, a property lookup on another object).
Side Note: If you change gizmos.gizmo1 after you do the things[gizmos.gizmo1] = "T1"; line, it does not change the name of the property on things. There's no enduring link, because the value of gizmos.gizmo1 was used to determine the property name during the things[gizmos.gizmo1] = "T1"; line (just like it is in any other expression).
var gizmos = {gizmo1: "G1"};
var things = {};
things[gizmos.gizmo1]="T1";
To get the value for a given key on an object use object["key"] or object.key

Creating json keys on the fly

I would like to create a json object to send as a post array, but I need to create the key on the fly
var id = $('#myInput').val();
var post = {
'product[123]': 'myValue', // this works fine - but isn't dynamic
'product['+id+']': 'myValue' // this does not work
}
Sending it in as a string works fine, but I get an issue when I want to make it more dynamic. Am I missing something really simple here, or am I trying to do something Javascript isn't supposed to do?
(Note that this has nothing to do with JSON. You're not using JSON there, you're using an object initializer. JSON is a textual (not code) format, which is a subset of JavaScript's object initializer syntax.)
Do it outside the object initializer, using [] notation:
var id = $('#myInput').val();
var post = {};
post[product[id]] = 'myValue';
That will take the value (at runtime) of product[id] and use that as the key for the property. If you wanted the key to literally be product[123] when id is 123, you'd use this instead:
post['product[' + id + ']'] = 'myValue';
A more generic discussion:
var a = "foo";
var obj = {};
obj[a] = "bar";
console.log(obj.foo); // "bar"
JavaScript allows you to specify property keys in two ways: Using dotted notation and a literal (obj.foo), or using bracketed notation and a string (obj["foo"]). In the latter case, the string doesn't have to be a string literal, it can be the result of any expression.
Try
post['product[' + id + ']'] = 'myValue';
Why do you use '[ ]' in ids of the object? Avoid to do this.
In your sample, you can do this by the following code:
var id = $('#myInput').val();
var post = {
'123': 'myValue',
id: 'myValue'
}
Or, if you realy realy want to use an arrry (actually, all objects ARE array in JavaScript).
You can write this:
var product=[];
product['123']='something';
product[id]='another';

how to get the value 'dynamically' from an associative array in javascript?

i am trying to get a value from a key stored on a string variable proyNombre, but whenever i call it via the common method "myAssociativeArray.MyKey", it gets the variable 'proyNombre' as the key, instead of getting its value and passing it as a key.
proyectos.each(function(index){
var proyNombre = this.value;
if(!(proyNombre in myArray)){ // whenever the variable is undefined, define it
myArray[proyNombre] = horas[index].value-0 + minutos[index].value/60;
}
else{
console.log(myArray.proyNombre); //This doesnt work, it tries to give me the value for the key 'proyNombre' instead of looking for the proyNombre variable
console.log(myArray.this.value); //doesnt work either
}
});
Try:
console.log(myArray[proyNombre]);
myArray is actually an object in javascript. You can access object properties with object.propertyName or, object['propertyName']. If your variable proyNombre contained the name of a property (which it does) you can use the second form, like I did above. object.proyNombre is invalid - proyNombre is a variable. You can't do for example:
var myObject = {};
myObject.test = 'test string';
var s = 'test';
console.log(myObject.s); // wrong!!
but you could then do:
console.log(myObject.test);
console.log(myObject['test']);
console.log(myObject[s]);
You need to use the same syntax you used to set the value:
console.log(myArray[proyNombre]);
Simply access the value with myArray[proyNombre].
You're doing it right in the assignment: myArray[proyNombre]. You can use the same method to retrieve the variable.
If you change:
console.log(myArray.proyNombre);
console.log(myArray.this.value);
to
console.log(myArray[proyNombre]);
console.log(myArray[this.value]);
You should get the same value (the value for the key represented by the variable proyNombre) logged twice.
It's true that Javascript doesn't have associative arrays but objects in Javascript can be treated like associative arrays when accessing their members.

Categories