I have this object:
popup_data = {
club: {
type: 'club',
type_img: {
header: 'CLUB HEADER',
img: 'https://source.unsplash.com/random/800x600',
sub_header: 'CLUB SUB HEADER',
content: 'TEXT',
hotspot_position: [5, -1.5, 2.5]
},
hotspots_array: [
{ id: () => this.club.type '-' 'type_img',
position: () => this.club.type_img.hotspot_position,
},
]
},
How to get type
and type_img.hotspot_position
from these nested functions
CodePudding user response:
just use the var name, popup_data
popup_data = {
club: {
type: 'club',
type_img: {
header: 'CLUB HEADER',
img: 'https://source.unsplash.com/random/800x600',
sub_header: 'CLUB SUB HEADER',
content: 'TEXT',
hotspot_position: [5, -1.5, 2.5]
},
hotspots_array: [
{ id: () => popup_data.club.type '-' 'type_img',
position: () => popup_data.club.type_img.hotspot_position,
},
]
},
What is this?
In JavaScript, thethis
keyword refers to an object.Which object depends on how
this
is being invoked (used or called).The
this
keyword refers to different objects depending on how it is used:In an object method,
this
refers to the object.
Alone,this
refers to the global object.
In a function,this
refers to the global object.
In a function, in strict mode,this
is undefined.
In an event,this
refers to the element that received the event.
Methods likecall()
,apply()
, andbind()
can referthis
to any object.
CodePudding user response:
You can access it by the variable name that you assign the entire object into.
popup_data = {
club: {
type: 'club',
type_img: {
header: 'CLUB HEADER',
img: 'https://source.unsplash.com/random/800x600',
sub_header: 'CLUB SUB HEADER',
content: 'TEXT',
hotspot_position: [5, -1.5, 2.5]
},
hotspots_array: [
{ id: () => popup_data.club.type '-' 'type_img',
position: () => popup_data.club.type_img.hotspot_position,
},
]
},
Since you are using ES6 arrow function, this
will not work at all. And if you used normal function, this
would be the object inside hotspots_array
, not the entire object.
CodePudding user response:
If you have more than one item, and want all those items to have access to the root, you can bind the function. You will need to use none arrow functions here, as they don't have a this
..
You can even extract your id
and position
function out of the object too, so that your not creating multiple instances of the exact same function.
eg..
function id() {
return this.club.type '-' 'type_img';
}
function position() {
return this.club.type_img.hotspot_position;
}
const popup_data = {
club: {
type: 'club',
type_img: {
header: 'CLUB HEADER',
img: 'https://source.unsplash.com/random/800x600',
sub_header: 'CLUB SUB HEADER',
content: 'TEXT',
hotspot_position: [5, -1.5, 2.5]
},
hotspots_array: [
{
name: 'test',
id, position
}, {
name: 'test2',
id, position
}
]
}
};
const popup_data_2 = {
club: {
type: 'this is club 2',
type_img: {
hotspot_position: [5, -1.5, 2.5]
},
hotspots_array: [
{
id, position
}
]
}
};
function bindFunctions(r, a) {
Object.entries(a).map(([k, v]) => {
const tp = typeof v;
if (tp === 'function') {
a[k] = v.bind(r);
} else if (tp === 'object') {
bindFunctions(r, v);
}
});
}
bindFunctions(popup_data, popup_data);
bindFunctions(popup_data_2, popup_data_2);
console.log(popup_data.club.hotspots_array[0].id());
console.log(popup_data.club.hotspots_array[0].position());
console.log(popup_data_2.club.hotspots_array[0].id());
Another option, having a single root item can be restrictive. If you wanted something more fancy I would create your Object using a function and use the power of closures. The example below I've added another prop that then has access to it's array.
function makeObject(data) {
const root = data;
for (const h of data.club.hotspots_array) {
//now lets add our functions
h.id = () => root.club.type '-' 'type_img';
h.position = () => root.club.type_img.hotspot_position;
h.array = data.club.hotspots_array;
}
return root;
}
const o1 = makeObject({
club: {
type: 'club',
type_img: {
header: 'CLUB HEADER',
img: 'https://source.unsplash.com/random/800x600',
sub_header: 'CLUB SUB HEADER',
content: 'TEXT',
hotspot_position: [5, -1.5, 2.5]
},
hotspots_array: [
{
name: 'test',
}, {
name: 'test2',
}
]
}
});
console.log(o1.club.hotspots_array[0].id());
console.log(o1.club.hotspots_array[0].position());
console.log('array:' o1.club.hotspots_array[0].array.length);