How to atomise nested array type data structure?

[jeffski]

I have a JSON payload similar to below:

{
  "groups": [
    {
      "items": [
        {
          "name": "item 1"
        },
        {
          "name": "item 2"
        }
      ]
    },
    {
      "items": [
        {
          "name": "item 3"
        },
        {
          "name": "item 5"
        }
      ]
    }
  ]
}

I am stuck on how I would parse this and convert it to atoms or atom families. I would expect to have a couple of groups (atomFamily?) and related to each group a couple of items (another atomFamily?).

I can't work out how I'd do this? Do you have atoms within atoms or you have to flatten it somehow and track ids to maintain the relationships. Ultimately I want to edit the groups and items independently of one another, and then convert it back to JSON again.

All the tutorials and guides out there only go one level deep with atomFamily and simple lists but there is nothing out there explaining how to go deeper. I am probably approaching this all wrong but any guidance would be much appreciated.

It looks like someone on Stack Overflow has a very similar problem: https://stackoverflow.com/questions/68558197/how-to-atomize-complex-structures

[honzabrecka]

I'd suggest to have an atom to hold the root and one atomFamily for groups and one atomFamily for items:

const root = atom({
  key: "Root",
  default: { groups: [] } 
});
const groups = atomFamily({
  key: 'Group',
  default: { items: [] },
});
const items = atomFamily({
  key: 'Item',
  default: { name: "" },
});

// so your example normalized would be:
// note that ids are just name of entity + index
root: { groups: ["group1", "group2"] } 
groups: { "group1": { items: ["item1", "item2"] }, "group2": { items: ["item3", "item4"] } }
items: { "item1": { name: "item 1" }, "item2": { name: "item 2" }, ... }

and selectorFamily to denormalize data back to its original shape.

[jeffski]

Perfect, thanks for this. After spending most of the day yesterday looking at it, I pretty much came to the same approach so good to see it is the way to go. Will just need to work out the selectorFamily but I think I can manage that.

[douglasg14b]

Brand new to this lib:

• How are you initializing the state of the atom families here? If you already have an array of groups, what is the preferred way to populate the atom families from that root atoms state?
• For updates to items, will it be necessary to replace the entire group or all groups? Or will the specific item suffice? Or is that what the selectorFamily is for?

I guess this could be summarized with, do you have a more complete example that can be read by new folks like myself in order to understand how these are slotting together?