Setting object properties as the object is composed in a nested data-structure

Question

I am trying to write an expressive JSON-representation where I try to do object composition, setting key values directly at the composition. However I can't compose multiple objects in a nested fashion.

What I want to achieve is an expressive way to write object data-structures with reusable objects in a short and neat way as a replacement for JSX -- that is why I wish I could "reuse" these object components and try to set the children key with an equal sign at composition. I only want to implement native JavaScript without libraries. JSX I'm guessing, if anybody knows, is probably converting HTML tags from strings with regular expressions? I would prefer a solution using object literals. Any ideas would be appreciated.

Example:

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'
                            }
                        ]
                    }
                ]
            }
        ]
    }
*/

Answer 1

Here is working example:

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.children = [{
      ...bar,
      children: bar.children = [{
        name: 'somethingElse'
      }]
    }]
  }]
}

console.log('Result:', dataStructure)
console.log('Foo:', foo)
console.log('Bar:', bar)

Note: but this is very strange what you are trying to do...

Answer 2

you have to set your bar.children outside of your variable definition, so it wont be called another time i guess. Having this expression:

bar.children = 
{
    name: 'somethingElse'
}

const dataStructure = {
    name: 'something',
    children: 
        [foo,
        children = [bar]]
}

will give you the follwing output:

{
    "name": "something",
    "children": [
        {
            "name": "Bob",
            "abilities": {
                "superpower": "Says grrr",
                "mood": "Gruchy"
            }
        },
        [
            {
                "name": "Denny",
                "abilities": {
                    "superpower": "Diabetes",
                    "mood": "Hopeful"
                },
                "children": {
                    "name": "somethingElse"
                }
            }
        ]
    ]
}