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

What output would you expect from that? What code have you tried already? — str
– str, Commented Aug 24, 2020 at 8:21
@str There is no script apart from the actual object composition. See the 'desired data structure' example. — DarkCodeWiz
– DarkCodeWiz, Commented Aug 24, 2020 at 8:26
@DarkCodeWiz seems you have an error in your resulting structure. It should not have = inside (because it is "resulting") — Anton
– Anton, Commented Aug 24, 2020 at 9:35
@Anton Well, how can I reuse objects in a deeply nested composition otherwise is the question. =) — DarkCodeWiz
– DarkCodeWiz, Commented Aug 24, 2020 at 10:01

Anton · Accepted Answer · 2020-08-24 10:19:54Z

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...

answered Aug 24, 2020 at 10:19

Anton

2,7231 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DarkCodeWiz Over a year ago

Don't you know that the customer is always right. ;) Writing large nested DOM structures this way would be benefited by more concise reading. Any suggestion how you would represent virtual DOM instead would be appreciated! I would like to work with object literals though.

Alexander Riedel · Accepted Answer · 2020-08-24 09:29:53Z

0

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"
                }
            }
        ]
    ]
}

answered Aug 24, 2020 at 9:29

Alexander Riedel

1,3591 gold badge10 silver badges16 bronze badges

2 Comments

DarkCodeWiz Over a year ago

It seems declaring keys directly on composed objects isn't supported natively but there must be alternatives to achieve this. I want to write expressive JSON for deeply nested data-structures instead of writing JSX. Your example produces incorrect data structure since children should always only contain objects.

DarkCodeWiz Over a year ago

Nice try though! The important part is that the solution gives good readability for large data structured, in this case representing virtual DOM.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related