Convert indexed keys with specific Key object JS

Question

i have a this simple object:

{
    "props[EYE][0]": "Yellow",
    "props[EYE][1]": "Blue",
    "props[BODY][0]": "BATMAN",
    "props[BODY][1]": "SUPERMAN"
}

now i want to change this object to something like this

{
    "props-EYE": ["Yellow", "Blue"],
    "props-BODY": ["BATMAN", "SUPERMAN"]
}

the [EYE] and [BODY] are Dynamic and it's not a static data... what is the best way to convert?

thank you for your help...

I try to spilt keys and make new ones but the function still finds the first value.

Answer 1

A quick solution constructing an object by looping through the original object and getting the prop names like EYE or BODY (that are dynamic) that you extract from the original object's keys (like from props[EYE][0]) along with the values found (like Yellow):

• if the key props-prop-name where prop-name is extracted (like EYE for example) already exists in the new object, then you push the value (like Blue) to the array found there (under the props-EYE key for example).
• otherwise you initialize an array that contains the value at the current iteration (like Blue).

To quickly extract the key-value pairs from the original object, the method Object.entries can be used along with Array.prototype.reduce to loop through those key-value pairs.

Here's a demo to illustrate

const beforeObj = {
    "props[EYE][0]": "Yellow",
    "props[EYE][1]": "Blue",
    "props[BODY][0]": "BATMAN",
    "props[BODY][1]": "SUPERMAN"
  },
  /**
   * get the key-value pairs from "beforeObj" and then loop through them using the reduce method where the argument "k" is the key (like "props[EYE][0]" and "v" is the corresponding value (like "Yellow")
   */
  afterObj = Object.entries(beforeObj).reduce((a, [k, v]) => {
    /**
     * "prop" holds the key to put in the newly created object (example: "prop" will contain "props-EYE" when the current key is "props[EYE][0]") 
     */
    const prop = 'props-' + k.replace(/.+?\[(\w+)\].*/, '$1');
    /** 
     * if we already has the current prop (like "props-EYE"), then just push the current value to the arrayu found there.
     * Otherwise, initialize a new array that contains the current value
     */
    !!a[prop] ? a[prop].push(v) : a[prop] = [v];
    // return the object for the next iteration 
    return a;
  }, {});

// print the result
console.log(afterObj);