Transforming an object into an array of its properties

Question

Transforming an object into an array of its properties

I am looking to transform the following object:

{
        middleName: null,
        name: "Test Name",
        university: {
            country: {
                code: "PL"
            },
            isGraduated: true,
            speciality: "Computer Science"
        }
    }

into an array structure:

[{
        key: "name",
        propertyValue: "Test Name",
    },
    {
        key: "middleName",
        propertyValue: null,
    },
    {   
        key: "university.isGraduated",
        propertyValue: true,
    },
    {   
        key: "university.speciality",
        propertyValue: "Computer Science", 
    },
    {   
        key: "university.country.code",
        propertyValue: "PL"
    }];

I have come up with an algorithm for this conversion, however, I believe it can be improved. It's especially important that if there are nested objects within the main object, they should be represented using dot notation (e.g university.country: "value")

let arr = [];
    Object.keys(parsedObj).map((key) => {
        if (parsedObj[key] instanceof Object) {
            Object.keys(parsedObj[key]).map((keyNested) => {
                if (parsedObj[key][keyNested] instanceof Object) {
                    Object.keys(parsedObj[key][keyNested]).map((keyNestedNested) => {
                        arr.push({ 'key': key + '.' + keyNested + '.' + keyNestedNested, 'propertyValue': parsedObj[key][keyNested][keyNestedNested] })
                    })
                } else {
                    arr.push({ 'key': key + '.' + keyNested, 'propertyValue': parsedObj[key][keyNested] })
                }
            })
        } else {
            arr.push({ 'key': key, 'propertyValue': parsedObj[key] })
        }
    });

Any suggestions on how to enhance this algorithm would be greatly appreciated.

javascript arrays

Answer 1

Answer №1

This function showcases a recursive implementation.

The code assumes that the object being processed contains only strings and objects as values. If your data includes additional data types, further modifications may be necessary.

const myObj = {
  middleName: null,
  name: "Test Name",
  university: {
    country: {
      code: "PL"
    },
    isGraduated: true,
    speciality: "Computer Science"
  }
}
const myArr = [];

function convertObjectToArray(obj, keyPrepender) {
  Object.entries(obj).forEach(([key, propertyValue]) => {
    if (typeof propertyValue === "object" && propertyValue) {
      const updatedKey = keyPrepender ? `${keyPrepender}.${key}` : key;
      convertObjectToArray(propertyValue, updatedKey)
    } else {
      myArr.push({
        key: keyPrepender ? `${keyPrepender}.${key}` : key,
        propertyValue
      })
    }
  })
}

convertObjectToArray(myObj);
console.log(myArr);

Answer 2

This function showcases a recursive implementation.

The code assumes that the object being processed contains only strings and objects as values. If your data includes additional data types, further modifications may be necessary.

const myObj = {
  middleName: null,
  name: "Test Name",
  university: {
    country: {
      code: "PL"
    },
    isGraduated: true,
    speciality: "Computer Science"
  }
}
const myArr = [];

function convertObjectToArray(obj, keyPrepender) {
  Object.entries(obj).forEach(([key, propertyValue]) => {
    if (typeof propertyValue === "object" && propertyValue) {
      const updatedKey = keyPrepender ? `${keyPrepender}.${key}` : key;
      convertObjectToArray(propertyValue, updatedKey)
    } else {
      myArr.push({
        key: keyPrepender ? `${keyPrepender}.${key}` : key,
        propertyValue
      })
    }
  })
}

convertObjectToArray(myObj);
console.log(myArr);

Answer 3

Answer №2

My approach would involve recursion while avoiding unnecessary intermediary arrays, unless dealing with a particularly large object. Here's an example:

function transform(obj, target = [], prefix = "") {
    // Iterate through the object keys
    for (const key in obj) {
        // Only handle "own" properties
        if (Object.hasOwn(obj, key)) {
            const value = obj[key];
            // Get the full key for this property, including prefix
            const fullKey = prefix ? prefix + "." + key : key;
            if (value && typeof value === "object") {
                // If it's an object...
                if (Array.isArray(value)) {
                    throw new Error(`Arrays are not valid`);
                } else {
                    // ...recursively call the function, providing the key as the prefix
                    transform(value, target, fullKey);
                }
            } else {
                // If not an object, push it to the array
                target.push({key: fullKey, propertyValue: value});
            }
        }
    }
    // Return the result
    return target;
}

Here is a live example:

const original = {
    middleName: null,
    name: "Test Name",
    university: {
        country: {
            code: "PL"
        },
        isGraduated: true,
        speciality: "Computer Science"
    }
};

function transform(obj, target = [], prefix = "") {
    // Iterate through the object keys
    for (const key in obj) {
        // Only handle "own" properties
        if (Object.hasOwn(obj, key)) {
            const value = obj[key];
            // Get the full key for this property, including prefix
            const fullKey = prefix ? prefix + "." + key : key;
            if (value && typeof value === "object") {
                // If it's an object...
                if (Array.isArray(value)) {
                    throw new Error(`Arrays are not valid`);
                } else {
                    // ...recursively call the function, providing the key as the prefix
                    transform(value, target, fullKey);
                }
            } else {
                // If not an object, push it to the array
                target.push({key: fullKey, propertyValue: value});
            }
        }
    }
    // Return the result
    return target;
}
const result = transform(original, []);
console.log(result);

.as-console-wrapper {
    max-height: 100% !important;
}

Note that the order of array entries in the output may not match the standard order of JavaScript object properties due to their unpredictable ordering behavior.

Answer 4

My approach would involve recursion while avoiding unnecessary intermediary arrays, unless dealing with a particularly large object. Here's an example:

function transform(obj, target = [], prefix = "") {
    // Iterate through the object keys
    for (const key in obj) {
        // Only handle "own" properties
        if (Object.hasOwn(obj, key)) {
            const value = obj[key];
            // Get the full key for this property, including prefix
            const fullKey = prefix ? prefix + "." + key : key;
            if (value && typeof value === "object") {
                // If it's an object...
                if (Array.isArray(value)) {
                    throw new Error(`Arrays are not valid`);
                } else {
                    // ...recursively call the function, providing the key as the prefix
                    transform(value, target, fullKey);
                }
            } else {
                // If not an object, push it to the array
                target.push({key: fullKey, propertyValue: value});
            }
        }
    }
    // Return the result
    return target;
}

Here is a live example:

const original = {
    middleName: null,
    name: "Test Name",
    university: {
        country: {
            code: "PL"
        },
        isGraduated: true,
        speciality: "Computer Science"
    }
};

function transform(obj, target = [], prefix = "") {
    // Iterate through the object keys
    for (const key in obj) {
        // Only handle "own" properties
        if (Object.hasOwn(obj, key)) {
            const value = obj[key];
            // Get the full key for this property, including prefix
            const fullKey = prefix ? prefix + "." + key : key;
            if (value && typeof value === "object") {
                // If it's an object...
                if (Array.isArray(value)) {
                    throw new Error(`Arrays are not valid`);
                } else {
                    // ...recursively call the function, providing the key as the prefix
                    transform(value, target, fullKey);
                }
            } else {
                // If not an object, push it to the array
                target.push({key: fullKey, propertyValue: value});
            }
        }
    }
    // Return the result
    return target;
}
const result = transform(original, []);
console.log(result);

.as-console-wrapper {
    max-height: 100% !important;
}

Note that the order of array entries in the output may not match the standard order of JavaScript object properties due to their unpredictable ordering behavior.

Answer 5

Answer №3

This is the most foolproof method I could come up with :D, no global variables required. Simply grab it and use it wherever you need!

const test = {
  middleName: null,
  name: "Test Name",
  university: {
    country: {
      code: "PL"
    },
    isGraduated: true,
    speciality: "Computer Science"
  }
};


function convertObjectToPropertiesByPath(inputObj) {
  let resultArray = [];
  let initialObject = {};

  const extractKeys = (obj, parentKey='') => {
    initialObject = resultArray.length === 0 ? obj : initialObject;
    const entries = Object.entries(obj);
    for(let i=0; i<entries.length; i++) {
      const key = entries[i][0];
      const value = entries[i][1];
      const isRoot = initialObject.hasOwnProperty(key);
      parentKey = isRoot ? key : parentKey + '.' + key;

      if(typeof value === 'object' && value !== null && !Array.isArray(value)){
        extractKeys(value, parentKey);
      } else {
       resultArray.push({ key: parentKey, property: value });
      }
    }
  };

  extractKeys(inputObj);
  return resultArray;
}

console.log(convertObjectToPropertiesByPath(test));

Answer 6

This is the most foolproof method I could come up with :D, no global variables required. Simply grab it and use it wherever you need!

const test = {
  middleName: null,
  name: "Test Name",
  university: {
    country: {
      code: "PL"
    },
    isGraduated: true,
    speciality: "Computer Science"
  }
};


function convertObjectToPropertiesByPath(inputObj) {
  let resultArray = [];
  let initialObject = {};

  const extractKeys = (obj, parentKey='') => {
    initialObject = resultArray.length === 0 ? obj : initialObject;
    const entries = Object.entries(obj);
    for(let i=0; i<entries.length; i++) {
      const key = entries[i][0];
      const value = entries[i][1];
      const isRoot = initialObject.hasOwnProperty(key);
      parentKey = isRoot ? key : parentKey + '.' + key;

      if(typeof value === 'object' && value !== null && !Array.isArray(value)){
        extractKeys(value, parentKey);
      } else {
       resultArray.push({ key: parentKey, property: value });
      }
    }
  };

  extractKeys(inputObj);
  return resultArray;
}

console.log(convertObjectToPropertiesByPath(test));

Answer 7

Answer №4

In my coding journey, I delved into creating a concise recursive function and an object for validation purposes.

let data = {
  middleName: null,
  name: "Test Name",
  university: {
    country: {
      code: "PL"
    },
    isGraduated: true,
    speciality: "Computer Science"
  }
}

function checkIfObject(obj) {
  return obj !== null && obj.constructor.name === "Object"
}

function retrieveValues(data) {
  let valuesArray = Object.keys(data).map(
    value => {
      return { key: value, value: checkIfObject(data[value]) ? retrieveValues(data[value]) : data[value] };

    });
  console.log(valuesArray);
}

retrieveValues(data);

Answer 8

In my coding journey, I delved into creating a concise recursive function and an object for validation purposes.

let data = {
  middleName: null,
  name: "Test Name",
  university: {
    country: {
      code: "PL"
    },
    isGraduated: true,
    speciality: "Computer Science"
  }
}

function checkIfObject(obj) {
  return obj !== null && obj.constructor.name === "Object"
}

function retrieveValues(data) {
  let valuesArray = Object.keys(data).map(
    value => {
      return { key: value, value: checkIfObject(data[value]) ? retrieveValues(data[value]) : data[value] };

    });
  console.log(valuesArray);
}

retrieveValues(data);

Transforming an object into an array of its properties

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Adding a key-value pair to an associative array using a foreach loop in PHP

Store image selection in state

The print screen button in Internet Explorer is not functioning the same way as in other browsers when using JavaScript

Manipulating Arrays in JavaScript: Techniques for Extracting Values Buried in Nested Objects

Issue encountered: NPM error, unable to find solution for resolving dependency and addressing conflicting peer dependency

I am able to access the JSON file from the URL without any issues, but for some reason, I am unable to fetch it using $

Aggregate data based on one column id and align it with data from another column id

Determine the fill color attribute value of a rectangle using Testcafe paired with typescript

Creating Vue3 Component Instances Dynamically with a Button Click

When using Node.js, you may encounter the error message: "TypeError: brevo.ApiClient is not a constructor

Utilizing window.location.pathname in Next.js for precise targeting

Searching for duplicated packages in npm

Tips for selecting the correct date on a DatePicker using selenium?

Is there a way to simultaneously display every element from two arrays?

Avoid refreshing AJAX on browser back navigation

What is the best way to retrieve a JSON attribute and save it into an array using JAVA?

JavaScript Regular Expressions: Naming Conventions

Does anyone have any insight on why I can't seem to remove an item from my list of tasks?

What is the best way to generate an @ symbol using JavaScript?

Retrieve specific elements from an array based on the other elements present in the array