Javascript multiple of the same object within an object - javascript

So I need to edit a property of an object in javascript. It contains multiple of the same object name. I am fairly familiar with javascript. My object looks like this:
var object = {
Sub: {
name: "FirstSubName",
propertyToChange: "Keep me the same"
},
Sub: {
name: "SecondSubName",
propertyToChange: "Change me" //This is the property I need to change
}
}
I want to change the second property of the second "Sub" to "ChangedProperty". If I want to do it without using chronological order (like object.Sub[1].propertyToChange = "ChangedProperty", what would I do?

As Bergi said, you cannot have these two properties. What you can have is an array, like this:
var object = {
Sub:[{name: "X", prop: "a property"},{name: "Y", prop: "another prop"}]
}
So, you can access them with the array notation you used in your question or either using a forEach for comparing values, for instance.
Hope this helps.

Related

creating an array whose elements are javascript objects with a certain property

I apologize in advance for the very basic question. I have a javascript page on which I create a number of objects, and assign those objects certain properties. What I would like to do is create an array whose elements are all and only those objects which have a certain property. I know how to create (e.g.) an array whose elements are all and only those DOM elements with a certain class; but I can't figure out how to do the parallel thing with javascript objects with a certain property.
I recognize that I could do this manually via an array literal. What I am looking for is a way to generate the array automatically, so that when new javascript objects with the relevant property are added, they are automatically added to the array.
For example, if I have
const firstconstant = {
type: "A",
};
const secondconstant = {
type: "B",
};
const thirdconstant = {
type: "A",
};
etc. I'd like a way of generating an array whose elements are all of the objects with type "A". Thanks for any help with this.
There's no point for declaring a new variable for every new object, that's the reason arrays were invented - so you don't have to type firstconstant, secondconstant, thirdconstant etc.
First declare an array with all the objects (and add them here):
const objects = [
{ type: "A" },
{ type: "B" },
{ type: "A" },
];
And then you can use the .filter method to filter out the objects that don't match:
const filtered = objects.filter(object => object.type === "A");

Object with to-be-defined attributes

I was wondering if there is a way to define attributes of a class that are not defined until the instance of an object is created. Lets say I want to have a object that works with multiple attributes, in example: name, width, weight, color. But some other times I'd like to use the same object to instantiate different properties: name, length, type, material.
class MultiProduct{
constructor(atttobedefined1=a1, atttobedefined2=a2, atttobedefined3=a3, atttobedefined4=a4){
this.atttobedefined1 = a1;
this.atttobedefined2 = a2;
this.atttobedefined3 = a3;
this.atttobedefined4 = a4;
}
}
var MP = new MultiProduct(name="tesla x",width="280cm",Weight="2000T",Color="Red");
At the end, When It comes to show the object on screen, depending on the properties, it would/could be used like:
console.log(MP['width']); //in case this property 'width' exists
//output "280cm"
Is there any way to get this way or every time I have a different property/real product to be represented I have to create a new object with its setters and getters? I ask this for JavaScript in particular, but I wonder if programmatically (in general) is possible.
Excuse the bad English and the non-sense code written to be used as example.
If you want to pass key/value pairs in an argument, then use an object.
new MultiProduct(
{ property: "name", value: "tesla x" },
{ property: "width", value: "280cm" },
etc
)
Or
new MultiProduct(
{
name: "tesla x",
width: "280cm",
etc
}
)
If you want to assign to a property where the name is in a variable, use square bracket notation:
const atttobedefined1 = /* How you read from the args depends on the specific forfmat */
this[atttobedefined1] = /* etc */
Having completely freeform properties will rather lose the benefits of using classes in the first place, so you might want to rethink the approach. You might be better off with just more and optional arguments.

How to get a JSON object's key from the object itself in JavaScript/a Vue v-for loop?

I'm not looking for the keys that this object contains but the key of the object itself (the key in the array containing the object).
I have this JSON:
{
"Object name (text)": {
"raw": "Some more text.",
},
"Another name": {
"raw": "Some other text.",
}
}
and would like to get "Object name (text)" for the first item.
My Vue code is:
<CustomComponent
v-for="object in objects"
:key="getKey(object)"
:object="object"
/>
I'm not sure if the getKey-method approach is how one is intended to get unique identifiers for iterating through the JSON array. Its code currently is:
getKey(object) {
return Object.keys(object)[0];
}
Now I'd like to somehow pass the name of the object to the CustomComponent ("Object name (text)" in the first case).
One temporary workaround that I intended to use until I find something more appropriate was getting the keys from the objects array like so:
:objectName="getObjectName(object)" and itemNumber: -1 in data and this method:
getObjectName(object) {
this.itemNumber = this.itemNumber + 1;
var objectName = Object.keys(this.objects)[this.itemNumber];
console.log("Object name: ", objectName);
}
However, the first line of this method causes it to run hundreds of times instead of only two times (why is that?; it works in the first 2 executions of the method and when commenting out that line) and I think this is unlikely the proper method to simply retrieve the object's name/key.
It also didn't work when putting the above code into the getKey method which would make more sense (and I had the code in that method before creating a separate method to debug). Then the key could be accessed in the component with this.$vnode.key However, it keeps being undefined. This might be a separate problem even though it could resolve this problem here as well - I might create a new question for it. It enters the methods "getKey" and "getObjectName" 6 times each even though it only renders two items on the page, like it should.
-> How to get the JSON object's key in JavaScript?
(Preferably from the object itself after iterating through a JSON array with a loop with Vue instead of only indirectly by checking the objects array.)
Edit: as a workaround I have now done this:
var keys = Object.keys(this.objects);
keys.forEach(element => {
this.objectsWithKeys.push({
object: this.objects[element],
key: element
});
});
<CustomComponent
v-for="objectWithKeys in objectsWithKeys"
:key="objectWithKeys.key"
:object="objectWithKeys.object"
>
</CustomComponent>
this.$vnode.key
This is solved, I used var objectsWithKeys = data[Object.keys(data)]; and {{ $vnode.key }}.

Same named items in one javascript object, how?

I try to do something like this:
var obj = {id: id, items: "asdf", items: "sdff", test: varTest};
BUT I need to add the two same named items called 'items' dynamically. Because it won't be always the same number of these elements. How can I add them to this object, without overwriting them itselfs?
Thank you very much.
PS: I know that this is probably not a good idea, but I use an API so I can't change this. I need to give them the same name.
You cannot use same key multiple times in an object. You can use array.
var obj = {id: id, items:["asdf", "sdff"], test: varTest};
This will be easy to access the elements having same semantics.
To add items use,
if (obj.hasOwnProperty(items)) {
obj.items.push(newVal);
} else {
obj.items = [newVal];
}

Testing for existence of enumeration value in a JavaScript associative array

I have built an "enumeration" in javascript using the following syntax:
MyEnum = {
MY_VAL_1 : { name: "Value 1" },
MY_VAL_2 : { name: "Value 2" },
MY_VAL_3 : { name: "Value 3" }
};
I want to store a dictionary containing 0 or more of these enumeration values and I want to be able to test for the existence of any particular value in the dictionary. I also want to show the values that are not in the dictionary inside a dropdown, and the values that are in the dictionary in another dropdown, and have buttons that allow the user to add or remove values to or from the dictionary using these dropdowns.
I can get the dropdowns working, but I can't test for existence in the dictionary outside of a "for (x in MyEnum)" block. If I use:
list[MyEnum.MY_VAL_1]
I always get false (I guess because the items are stored without the MyEnum namespace?). If I try:
list[MY_VAL_1]
I just get an Uncaught ReferenceError.
How can I get this to work, or is there a better way to do this?
Here is a jsFiddle of what I've done so far: http://jsfiddle.net/jKfbh/3/
MyEnum.MY_VAL_1 returns the object you specified, { name: "Value 1" }.
To test if a value is in your "list" (which, in fact, is an object or dictionary), you should use this code:
if (list["MY_VAL_1"]) {
alert('val 1 is in list');
}
var MyEnum = {
MY_VAL_1 : { name: "Value 1" },
MY_VAL_2 : { name: "Value 2" },
MY_VAL_3 : { name: "Value 3" }
};
alert("MY_VAL_1" in MyEnum);
JavaScript doesn't have enums. In ES5 you could define properties as sealed frozen etc. which would make them perform similarly to enums, but, in all honesty, if you found yourself in need of such a feature in JavaScript, you probably need to reconsider your design. This doesn't mean that your design is necessarily bad, it's that JavaScript provides almost no instrumentation to do what you want.
you can check the value like this:
if(MyEnum['MY_VAL_1']){
alert('val 1 in the list');
}

Categories

Resources