How to check if an object has properties or nested objects

Question

Assuming an object like the one below, I'm trying to write a function to get all the properties. How could I manage the nested paths? Is there a way to check if a value is a property or a nested object? The logic would be "if the property is the final one take it, otherwise make it a part of the path to the final one" Thank you!

extend: {
            colors: {
                primary: {
                    DEFAULT: "#C5003E",
                    dark: "#A20033",
                },
                secondary: {
                    100: "#F7F8F8",
                    300: "#E6E7E9",
                    500: "#888888",
                    700: "#444444",
                    900: "#222222",
                },
                success: "#008540",
                warning: "#EB5A2D",
                gray: {
                    DEFAULT: "#444444",
                    light: "#888888",
                    dark: "#222222",
                },
                veryLightGray: "#E6E7E9",
                background: "#F8F8F8",
            },
            dropShadow: {
                lower: "0 2px 4px rgba(34,34,34,0.1)",
                higher: "0 4px 20px rgba(34,34,34,0.1)",
            },
            fontSize: {
                "bo-xs": ["0.75rem", { lineHeight: "1.25rem" }],
                "bo-sm": ["0.875rem", { lineHeight: "1.375rem" }],
                "bo-base": ["1rem", { lineHeight: "1.5rem" }],
                "bo-lg": ["1.125rem", { lineHeight: "1.625rem" }],
                "bo-xl": ["1.375rem", { lineHeight: "1.875rem" }],
                "bo-2xl": ["1.75rem", { lineHeight: "2.25rem" }],
                "bo-3xl": ["2.25rem", { lineHeight: "2.75rem" }],
            },
            fontFamily: {
                base: ['"Open Sans"', "serif"],
                value: ["Value"],
                valueBold: ["ValueBold"],
            },
            spacing: {
                xxs: "0.25rem",
                xs: "0.5rem",
                sm: "0.75rem",
                md: "1rem",
                lg: "1.5rem",
                xl: "2rem",
                xxl: "3rem",
            },
            borderWidth: {
                1: "1px",
                3: "3px",
                6: "6px",
            },
            boxShadow: {
                base: "0px 3px 17px #2C282820",
                input: "0px 0 5px 0px rgba(0, 0, 0, 0.16)",
                full: "0 5px 16px 0 rgba(0, 0, 0, 0.08)",
                levelRing: "0 0 15px 0 #4ecb7180",
            },
        },

Possible duplicate of [Recursively looping through an object to build a property list](https://stackoverflow.com/questions/15690706/recursively-looping-through-an-object-to-build-a-property-list) or [Check if a value is an object in JavaScript](https://stackoverflow.com/questions/8511281/check-if-a-value-is-an-object-in-javascript) — Wyck, Jun 30 '22 at 14:42

score 2 · Answer 1 · answered Jun 30 '22 at 14:36

look into this snippet this will help you to achieve your desire output.
Note: recursion is your friend now.

const iterate = (obj) => {
   Object.keys(obj).forEach(key => {
     console.log(`key: ${key}, value: ${obj[key]}`)
     if (typeof obj[key] === 'object' && obj[key] !== null) {
          iterate(obj[key])
     }
  })
}

How to check if an object has properties or nested objects

1 Answers1