How should I proceed to recursively target a store key/value?

[Billybobbonnet]

Hello,

I'm working on a recursive form component. It takes a schema as input and creates a store object as well as the related UI. I have bound each input to the store, along with a level argument to find the value to update.

I have 3 possible types of values:

• A primitive (string, boolean, integer, etc.)
• An object
• An array

In the level argument, I pass an array with the "path" to the value in the store.

Let's say I have a document with an authors array of objects such as this one:

{
        title: "my title",
        authors: [
          {
            firstname: "bob",
            lastname: "Marley",
          },
        ],
      }

The firstname field would then have as level argument ['authors', 0 , 'firstname']. i.e. the key authors, 0 being an integer, it will look the the _n_th item, then firstname being the last, it would be a primitive. If firstname was followed by an integer, it would be an array, if followed by a string, it would be an object.

While all the UI, schema and validation works, I still struggle to update the store. Note this is a work in progress and an approach I came up with : I'm not sure this is the best way to go, and this discussion purpose is to assess it + fix the issues.

Right now, here is the actions code to update my store from a computed model in the input. Basically, I call updateForm from the input, pass the level argument, and then I call recursively getKey to get a pointer to the related store value that I want to update.

 getKey({ key, level, store }) {
      console.log("key: ", key)
      console.log("level: ", level)
      console.log("store: ", store)
      console.log("store key val: ", store?.[level[0]])
      if (level.length === 1) {
        //guard against undef keys
        if (store[level[0]] === undefined) store[level[0]] = "" // TODO make sure it works with othjer primitive types
        return store[level[0]]
      }
     

      if (level.length > 1) {
        const isArray = typeof level[0] === "number"
        //guard against undef keys
        if (store[level[0]] === undefined) {
          if (isArray) {
            store[level[0]] = []
          } else {
            // if the key is not a number, it is an object (if it was a primitive, level.length would be 1)
            store[level[0]] = {}
          }
        }
        return this.getKey({
          key,
          level: level.slice(1),
          store: store[level[0]],
        })
      }
    },
 updateForm({ key, value, type, level = null }) {
      level = level ?? [this[type].form[key]]
      console.log(`updateForm 
      key: ${key}
      value: ${value} 
      type: ${type} 
      level: ${level}`)
      // if level length > 1 recursively call getKey
      if (level.length > 1) {
        let store = this.getKey({ key, level, store: this[type].form })
        store = value
        // else you mutate store at given value
      } else {
        this[type].form[key] = value
      }
    },

The task might be tricky. Thank you in advance for your inputs.

[Billybobbonnet]

Shortest suspense ever, I managed to make it by refactoring my code:

updateForm({ key, value, type, level = null, store = null  }) {
     level = level ?? [this[type].form[key]]
     store = store ?? this[type].form
     console.log(`updateForm 
     key: ${key}
     value: ${value} 
     type: ${type} 
     level: ${level}`)
     if (level.length === 1) {
       //guard against undef keys
       if (store[level[0]] === undefined) store[level[0]] = "" // TODO make sure it works with othjer primitive types
       store[key] = value
     }
    

     if (level.length > 1) {
       const isArray = typeof level[0] === "number"
       //guard against undef keys
       if (store[level[0]] === undefined) {
         if (isArray) {
           store[level[0]] = []
         } else {
           // if the key is not a number, it is an object (if it was a primitive, level.length would be 1)
           store[level[0]] = {}
         }
       }
       return this.updateForm({
         key,
         value,
         level: level.slice(1),
         type,
         store: store[level[0]],
       })
     } 
   },

I'll keep this discussion open for now as I would gladly get input from others regarding the recursive approach and the best way to achieve it.