github twitter codepen youtube

Convertir un Object a un Array de Objects en JavaScript

Comenzando con cuál es la problematica que tenia (una chorrada), era que de un formulario iba generando inputs recorriendo un array de propiedades que después tenia que enviar agrupados en un array de objetos como propiedad de un JSON.

const arrayValues = {
    "attributesValues": // Aquí necesito ese array de objetos
}

Esté es el objeto que necesito transformar:

const attributes = {
  "attribute11": {
    "ruleInstanceValueId": 2,
    "ruleAttributeId": {
      "ruleAttributeId": 11
    },
    "isoAttributeValueId": 2,
    "attributeValue": "CHINA"
  },
  "attribute10": {
    "ruleInstanceValueId": 2,
    "ruleAttributeId": {
      "ruleAttributeId": 10
    },
    "isoAttributeValueId": 4,
    "attributeValue": "1234567890876544"
  }
}

Todo bien hasta aquí, termine de generar el objeto pero mi problema se presento cuando tenia que pasar el objeto de objetos a un array de objetos, no sabía por donde empezar, para mi suerte encontre está solución.

const objectToArrayOfObjects = ( obj ) => {
    const arrayValues = [];

  for(let key in obj) {
    arrayValues.push( obj[key] );
  }

  return arrayValues;
}

Está solución si que funciona pero no me esperaba que existe un método para imprimir las propiedades de un objeto como son:

  • Object.keys(object)
const propertyNames = Object.keys( attributes );

console.log( propertyNames );

Salida:

["attribute11","attribute10"]
  • Object.values(object)
const propertyValues = Object.values( attributes );

console.log( propertyValues );

Salida:

[
  {
    "ruleInstanceValueId": 2,
    "ruleAttributeId": {
      "ruleAttributeId": 11
    },
    "isoAttributeValueId": 2,
    "attributeValue": "CHINA"
  },
  {
    "ruleInstanceValueId": 2,
    "ruleAttributeId": {
      "ruleAttributeId": 10
    },
    "isoAttributeValueId": 4,
    "attributeValue": "1234567890098765"
  }
]
  • Object.entries(object)
const entries = Object.entries( attributes );

console.log( entries );

Salida:

[
  [
    "attribute11",
    {
      "ruleInstanceValueId": 2,
      "ruleAttributeId": {
        "ruleAttributeId": 11
      },
      "isoAttributeValueId": 2,
      "attributeValue": "CHINA"
    }
  ],
  [
    "attribute10",
    {
      "ruleInstanceValueId": 2,
      "ruleAttributeId": {
        "ruleAttributeId": 10
      },
      "isoAttributeValueId": 4,
      "attributeValue": "1234567890098765"
    }
  ]
]

Otra problematica que tuve era como establecer el estado inicial iterando los datos ya que no necesitaba mandar los datos que se muestran en la vista sino a partir de un elemento que seleccione obtuve información que me ayuda a construir el body que voy a enviar al backend, para ello hice uso de useEffect() un hook de React y defini un objeto vacio para despues de rrecorrer los datos establecerlo como data inicial con ayuda del hook useState().

// establecemos un state que ira cambiando
const [attributes, setAttributes] = useState({});

useEffect(() => {

  const initialAttibutes = {};

    // obtenemos la data del backend
  getRulDataById(ruleId).then((response) => {

        // recorremos los attributes que es un objeto anidado
    [response].map((row) => {                       
      row && row.attributes.map((attribute, key) => {

                // asignamos cada objeto a initialAttibutes
        Object.assign(initialAttibutes, {
          [key]: {
            "ruleInstanceValueId": row.ruleId,
            "ruleAttributeId": {
                "ruleAttributeId": attribute.ruleAttributeId                        
            },
            "isoAttributeValueId": attribute.isoAttributeEntity.isoAttributeId,
            "attributeValue": "HOLA"
          }
        });

      }) 
    });

        // cambiamos el estado con el objeto initialAttibutes
    setAttributes(initialAttibutes);
  });

}, []);

La propiedad Object.values era justo lo que necesitaba 😂, no me lo puedo creer una locura para hacer solo eso; de verdad que no lo capte a la primera lo dejo escrito en este por si a alguien le pasa lo mismo ya tenga está solución para resolverlo.