Traverse an object of arrays, for a nested form

Question

I have a dynamic form, that is nested, the form is to describe an overhead gantry crane.

so the structure looks like this:

let equipmentInfo = {   
  bridges:[{
    trolleys:[{
      hoists:[{
      
      }]
    }]
  }] 
}

I have a function component for each bridge, trolley, and hoist set of fields. I pass down an array that describes its location in the tree like:

let keyPath = [['arrayLocation', indexOfEntry]] // [['bridge', 1], ['trolley',3], ['hoist', 0]]

My question surrounds the use of this getObject function

const getObject = (object, location) => {
    if(object == undefined) return {}
    if(location.length == 0) return object
    if(location.length == 1) return object[location[0][0]][location[0][1]]
    if(location.length == 2) return object[location[0][0]][location[0][1]][location[1][0]][location[1][1]]
    if(location.length == 3) return object[location[0][0]][location[0][1]][location[1][0]][location[1][1]][location[2][0]][location[2][1]] 
    if(location.length == 4) return object[location[0][0]][location[0][1]][location[1][0]][location[1][1]][location[2][0]][location[2][1]][location[3][0]][location[3][1]] 
    if(location.length == 5) return object[location[0][0]][location[0][1]][location[1][0]][location[1][1]][location[2][0]][location[2][1]][location[3][0]][location[3][1]][location[4][0]][location[4][1]] 
    if(location.length == 6) return object[location[0][0]][location[0][1]][location[1][0]][location[1][1]][location[2][0]][location[2][1]][location[3][0]][location[3][1]][location[4][0]][location[4][1]][location[5][0]][location[5][1]]
    if(location.length == 7) return object[location[0][0]][location[0][1]][location[1][0]][location[1][1]][location[2][0]][location[2][1]][location[3][0]][location[3][1]][location[4][0]][location[4][1]][location[5][0]][location[5][1]][location[6][0]][location[6][1]]
}

its used in the handleOnChange like this:

const handleInputChange = (e, keyPath) => {
    
  const { name, value } = e.target;
  const object = {...equipmentInfo}

  const targetObject = getObject(object, keyPath)
  targetObject[name] = value

  setObject(targetObject, object, keyPath)
    
  setEquipmentInfo(object);
};

Is there a better way to do this? not only for better readability, but to support n amount of branches.

  <BridgeFields 
    keyPath={newKeypath} 
    handleOnChange={handleOnChange}
    equipmentInfo={EquipmentInfo}
    setEquipmentInfo={setEquipentInfo}
    
  />

Here is the implementation example:

// inside <BridgeFields/>
getObject(equipmentInfo, keyPath).trolleys.map((trolly, index)) => {

  // add to the keyPath the compenent and its index
  let newKeyPath = [...keyPath, ["trolleys", index]]
  
  // Form fields describing a bridge 
  <Form.Component 
    type='text' 
    name='serialNumber'
    onChange={(e)=>{handleOnChange(e, newKeyPath)}
  />

  // also include its child component fields (hoists, etc) .. like:
  <HoistFields 
    keyPath={newKeypath} 
    handleOnChange={handleOnChange}
    equipmentInfo={EquipmentInfo}
    setEquipmentInfo={setEquipentInfo}
}

This works and its actually quite fast, but im looking to improve what I've done here. there is more to this equipmentInfo object and i would like to make it better.

I appreciate any advice thanks!

I have some questions. In the example array `[['bridge', 1], ['trolley',3], ['hoist', 0]]` key names are in singular, but in the `equipmentInfo ` object example they are in plural, what is the correct form? Also, could you add an specific example of a object with actual data, and what do you expect the getObject to return? Thanks. — maxpsz, Jan 20 '22 at 00:17
You may want to refer [this answer](https://stackoverflow.com/a/43518153/13658816) and reconsider replacing the Arrays with Objects making life much easier by using `immutable` and `getIn`. It is obviously not an answer; rather an idea which may not be suitable to you at all (& in that case, my apologies). — jsN00b, Jan 20 '22 at 04:14
@maxpsz Sorry they are supposed to be plural to match the field names. — TaW, Jan 20 '22 at 14:37

jsN00b · Accepted Answer · 2022-01-21T05:32:05.160

One possible solution (with the assumption that the location array will have the exact keys namely 'bridges', 'trolleys', 'hoists') is to use Array reduce like so:

const getObj = (obj = equipmentInfo, location = [['bridges', 1], ['trolleys', 0], ['hoists', 0]]) => (
    location.reduce(
        (acc, itm) => ({ ... acc[itm[0]][itm[1]] }), obj || {}
  )
);

Explanation

For each item in location array, get the prop (indicated by the 0-th index).
The value corresponding to the prop is an array.
Use location element's value at index-1 to identify the required array element (of the array at step-2 above)

Apologies, if this explanation is not too clear.

Code-snippet to verify

const equipmentInfo = {
  bridges: [{
    trolleys: [{
      hoists: [{
        k0: 'b0t0h0v0'
      }, {
        k1: 'v1'
      }, {
        k2: 'v2'
      }]
    }, {
      hoists: [{
        k0: 'b0t0h1v0'
      }, {
        k1: 'v1'
      }, {
        k2: 'v2'
      }]
    }, {
      hoists: [{
        k0: 'b0t0h2v0'
      }, {
        k1: 'v1'
      }, {
        k2: 'v2'
      }]
    }, {
      hoists: [{
        k0: 'b0t1h0v0'
      }, {
        k1: 'v1'
      }, {
        k2: 'v2'
      }]
    }, {
      hoists: [{
        k0: 'b0t1h1v0'
      }, {
        k1: 'v1'
      }, {
        k2: 'v2'
      }]
    }, {
      hoists: [{
        k0: 'b0t1h2v0'
      }, {
        k1: 'v1'
      }, {
        k2: 'v2'
      }]
    }]
  }, {
    trolleys: [{
      hoists: [{
        k0: 'b1t0h0v0'
      }, {
        k1: 'v1'
      }, {
        k2: 'v2'
      }]
    }, {
      hoists: [{
        k0: 'b1t0h1v0'
      }, {
        k1: 'v1'
      }, {
        k2: 'v2'
      }]
    }, {
      hoists: [{
        k0: 'b1t0h2v0'
      }, {
        k1: 'v1'
      }, {
        k2: 'v2'
      }]
    }, {
      hoists: [{
        k0: 'b1t1h0v0'
      }, {
        k1: 'v1'
      }, {
        k2: 'v2'
      }]
    }, {
      hoists: [{
        k0: 'b1t1h1v0'
      }, {
        k1: 'v1'
      }, {
        k2: 'v2'
      }]
    }, {
      hoists: [{
        k0: 'b1t1h2v0'
      }, {
        k1: 'v1'
      }, {
        k2: 'v2'
      }]
    }]
  }]
};

const getObj = (obj = equipmentInfo, location = [
  ['bridges', 1],
  ['trolleys', 0],
  ['hoists', 0]
]) => (
  location.reduce(
    (acc, itm) => ({ ...acc[itm[0]][itm[1]]
    }), obj || {}
  )
);


console.log('b 1, t 0, h 0', getObj());
console.log('b 1, t 1, h 0', getObj(equipmentInfo, [
  ['bridges', 1],
  ['trolleys', 1],
  ['hoists', 0]
]));
console.log('b 0, t 1, h 0', getObj(equipmentInfo, [
  ['bridges', 0],
  ['trolleys', 1],
  ['hoists', 0]
]));
console.log('b 0, t 0, h 0', getObj(equipmentInfo, [
  ['bridges', 0],
  ['trolleys', 0],
  ['hoists', 0]
]));

Edit

Set-object code:

const setObj = (updatedObj, obj = equipmentInfo, location = [
  ['bridges', 1],
  ['trolleys', 0],
  ['hoists', 1]
]) => {
  location.reduce((acc, itm, idx) => {
    const tgtObj = acc[itm[0]][itm[1]];
    if (idx < location.length - 1) return tgtObj;
    acc[itm[0]][itm[1]] = {
      ...tgtObj,
      ...updatedObj
    };
    return null;
  }, obj);
};

let myObj = {
  ...equipmentInfo
};
setObj({
  zztest: 'okay'
}, myObj);
console.log(myObj);

OK this is perfect!! One more thing though before I mark it as the answer, I have a setObject function I would like to replace as well? — TaW, Jan 20 '22 at 14:31
Please update the question with the `setObject` function to see how it is being done currently. — jsN00b, Jan 20 '22 at 15:08
the function is the same, instead of return object[][][][][], its object[][][][] = value — TaW, Jan 20 '22 at 19:51
Glad to be of help. Here's [MDN link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce#examples) with trivial examples, but helpful to understand better (I hope). — jsN00b, Jan 21 '22 at 14:19

Traverse an object of arrays, for a nested form

1 Answers1