How to build a web form that will adapt to a schema that is subject to change?
I'm new to web development and my main task at work right now is to develop a website that will allow me to create something called a Baseline Policy(BP). It's not particularly important to know what that is but essentially there are multiple types of BP's and there can always be types of BP's added later.
One example of a BP is a Package. There is a server that I can call via ajax that will give me JSON schema that defines all the fields required to create a Package. The package scheme is pretty straightforward, it has it has 8 fields that are all on 1 Level JSON. This is what a part of it looks
There is another BP schema called a Subscription. This schema has 4 Level JSON. Here is what a part of that looks like
As you can see, this gets more complicated since the UI will have to display it within the context of each Level 1 header. For example, if user has to define Blackout Service Block List, they would have to create a Blackout Service Block within which they have to define what areas are going to be in Blackout and what type of blackout service it will be. My job is to make a front end UI that will pull the schema, whether it be Package or Subscription or something else and apply the same parsing and rendering techniques. That way if they every change the schema, or add a new schema, there shouldn't have to be any code changes on the front end to accommodate these changes. Also, since this one is just 4 levels deep, the front end needs to be adaptable to 5 or 6 levels deep too.
Since I'm very new to Web Dev, this task sounds impossible for me. Maybe I just don't have enough experience in web development to come up with a solution for this which is why I want input from more experienced web devs on this forum. I hope I explained the issue clearly in my post.
EDIT:
A version of this project already exists but using the assumption that the schema is static, and won't change. Here is an example of the Subscription JSON Schema and its subsequent rendering on the Front End.
Note that there were changes in the schema which are not reflected in the UI since this version of the project was based on a static schema. For example, there are no Download and Browsable in Device properties under device actions anymore. Since the schema was static, a table design was chosen.
Let's say tomorrow, they add some property that needs to be filled under the Supported Format property. Now, all of a sudden, this UI design needs to be changed and the table probably no longer applies. All of this is just boggling my mind, and I need to think of a simpler way to design the UI so that it can adapt to adding and missing properties on any JSON level.