this is my solution and it seems quite simple and effective:

here is the example:
text

`

<head>
    <script>
        function exploreElement(element, div) {  // get the schema or JSON object
            for (const item in element) {   // for each element in the object
                if (element.hasOwnProperty(item)) {     // if it has own property
                    // append the item to the body
                    const parentDiv = document.createElement("div");
                    parentDiv.setAttribute("title", parseInt(div.title) + 1);
                    // catch the value of the item
                    const value = element[item];
                    // add item and value on the same level and same div
                    parentDiv.innerHTML = "level " + parentDiv.title + " " + item;
                    div.appendChild(parentDiv);
                    if (typeof (value) !== "object" && typeof (value) !== "array") {  // if the value is not an object or an array
                        parentDiv.innerHTML += ":" + value;
                    } else {    // if the value is just an object or an array
                        exploreElement(value, parentDiv);  // iterate the value as element
                    }
                } else {
                    console.log("item without properties");
                }
            }
        }
        let n = 0;
        // get json schema
        fetch("/database/sportExerciseJson.schema.json")
            .then(response => response.json())
            .then(schema => {
                document.body.title = 0;
                exploreElement(schema, document.body);
            })
            .catch(error => console.log(error));

    </script>
    <style>
        div {
            padding: 5px;
            border: solid 1px;
        }

    </style>
</head>

<body>

</body>

`

I have tried to explore all properties and objects or array inside an JSON object.

Is that the best way of doing it or there are some better options?