¿Cómo descomponer un objeto con las rutas de las claves en JavaScript?

En este artículo, aprenderemos a descomprimir un objeto que tiene una cierta cantidad de pares clave-valor dentro de él con las rutas de las claves en JavaScript.

Declaración del problema: le dan un objeto con varios pares clave-valor. Algunas teclas tienen varios nombres de teclas presentes después de un punto, básicamente necesita descomprimir ese objeto. Podría lograr un camino por el cual sería más fácil distinguir las claves y sus valores por separado.

Enfoque: Primero necesitamos declarar un objeto que inicialmente tendría diferentes pares clave-valor. Hay varios nombres de clave que debemos segregar y mostrar bajo el mismo objeto principal que consta de esa clave en particular con su valor.

Por ejemplo, “car.seat.0.seater” representa un objeto anidado en el objeto car que es además una array que consta de la clave “seater” en su primer índice correspondiente a su valor.

Primero intentemos entender cómo podríamos crear un objeto que tendría varios pares clave-valor en JavaScript.

Ejemplo 1: el siguiente fragmento de código nos ayudará a crear un objeto.

<script> 
 let object = {
    "firstName": "Hello",
    "lastName": "World",
    "car.name": "Duster",
    "car.price": 9.9,
    "car.mileage": 16.42,
    "car.seat.0.seater": 5,
    "car.seat.1.seatLength": 4360,
  };
  console.log(object);
 </script>

Producción:

{
  'firstName': 'Hello',
  'lastName': 'World',
  'car.name': 'Duster',
  'car.price': 9.9,
  'car.mileage': 16.42,
  'car.seat.0.seater': 5,
  'car.seat.1.seatLength': 4360
}

Después de crear el objeto con varios pares clave-valor, ahora analizaremos los enfoques a través de los cuales podríamos lograr el objeto sin aplanar. Los siguientes son algunos enfoques para lograr el objetivo mencionado anteriormente.

Enfoque 1: 

• En este enfoque, usaremos el bucle for-in que iterará a través de nuestro objeto y luego almacenaremos nuestras claves en una variable y siempre que encontremos un punto usaremos el método split() para tener todos los nombres de las claves.
• Usaremos el método reduce() que nos ayudará a verificar si la siguiente clave es un número o no después de convertir una string en un número.
• Luego usaremos el método JSON.stringify() que nos ayudará a imprimir nuestro objeto de manera más efectiva al convertir todos los valores del objeto en valores de strings correspondientes.

<script>
  let object = {
    firstName: "Hello",
    lastName: "World",
    "car.name": "Duster",
    "car.price": 9.9,
    "car.mileage": 16.42,
    "car.seat.0.seater": 5,
    "car.seat.0.seatLength": 4360,
  };
  
  let unflattenObject = (data) => {
    let result = {};
    for (let i in data) {
      let keys = i.split(".");
      keys.reduce((acc, value, index) => {
        return (
          acc[value] ||
          (acc[value] = isNaN(Number(keys[index + 1]))
            ? keys.length - 1 === index
              ? data[i]
              : {}
            : [])
        );
      }, result);
    }
    return result;
  };
  console.log(JSON.stringify(
    unflattenObject(object), null, 4));
</script>

Producción:

{
    "firstName": "Hello",
    "lastName": "World",
    "car": {
        "name": "Duster",
        "price": 9.9,
        "mileage": 16.42,
        "seat": [
            {
                "seater": 5,
                "seatLength": 4360
            }
        ]
    }
}

Enfoque 2:

• En este enfoque, primero iteraremos sobre nuestro objeto y también usaremos el método split() siempre que haya un punto después de cualquier nombre clave.
• Mientras recorremos las substrings obtenidas después de la división, primero verificaremos si la siguiente substring es un número o no.
• Si no es un número, representará uno de los nombres clave de un objeto; de lo contrario, es un índice de una array, por lo que agregaremos nuestros valores en un objeto vacío o en una array vacía.

<script> 
 let object = {
    firstName: "Hello",
    lastName: "World",
    "car.name": "Duster",
    "car.price": 9.9,
    "car.mileage": 16.42,
    "car.seat.0.seater": 5,
    "car.seat.0.seatLength": 4360,
  };
  let unflatten = (obj) => {
    let result = {},
      temp,
      substrings,
      property,
      i;
    for (property in obj) {
      substrings = property.split(".");
      temp = result;
      for (i = 0; i < substrings.length - 1; i++) {
        if (!(substrings[i] in temp)) {
          if (isFinite(substrings[i + 1])) {
            temp[substrings[i]] = [];
          } else {
            temp[substrings[i]] = {};
          }
        }
        temp = temp[substrings[i]];
      }
      temp[substrings[substrings.length - 1]] = obj[property];
    }
   return result;
  };
 console.log(JSON.stringify(unflatten(object), null, 4));
</script>

Producción:

{
    "firstName": "Hello",
    "lastName": "World",
    "car": {
        "name": "Duster",
        "price": 9.9,
        "mileage": 16.42,
        "seat": [
            {
                "seater": 5,
                "seatLength": 4360
            }
        ]
    }
}