I am in the process of creating a unique JSON representation, focusing on object composition to directly set key values during composition. However, I've encountered difficulty composing multiple objects in a nested manner.
My goal is to find an expressive method for constructing object data structures with reusable components in a concise way, acting as a substitute for JSX. Therefore, I'm looking to "reuse" these object components and assign children keys using equal signs during composition. I aim to stick to pure native JavaScript without any external libraries. My assumption about JSX is that it likely converts HTML tags from strings using regular expressions? Ideally, I would like to use object literals for my solution. Any insights are welcome.
For instance:
const foo = {
name: 'Bob',
abilities: {
superpower: 'Says grrr',
mood: 'Gruchy'
}
}
const bar = {
name: 'Denny',
abilities: {
superpower: 'Diabetes',
mood: 'Hopeful'
}
}
const dataStructure = {
name: 'something',
children: [
foo.children = [ // 'foo' object will result in an array, even if we only set .children
bar.children = [
{
name: 'somethingElse'
}
]
]
]
}
/*
Desired resulting data structure:
{
name: 'something',
children: [
{
name: 'Bob',
abilities: {
superpower: 'Says grrr',
mood: 'Gruchy'
},
children = [
{
name: 'Denny',
abilities: {
superpower: 'Diabetes',
mood: 'Hopeful'
},
children = [
{
name: 'somethingElse'
}
]
}
]
}
]
}
*/