How to pass object from JS file to html page?

Good afternoon. I had some difficult problem, try to describe as clear as possible.
So from the server I get two objects for the two models. These objects contain fields category, name, ID, model elements, etc. By filtering I get 4 array. In the first and second array of stored unique identifiers, and in the third and fourth duplicate IDs. The first array contains the unique identifier for the first model. the second is unique to the second array and the third and fourth common elements to them respectively.
To illustrate this we give the following example.
const dataFirstModel = [{"revitid": "1"},{"revitid": "2"},{"revitid": "3"},{"revitid": "4"}];
const dataSecondModel = [{"revitid": "1"},{"revitid": "2"},{"revitid": "5"},{"revitid": "6"}];

As you can see they have the first two revitid the same and the last different. In the end, I by filtering received the following arrays:
[ //first array(difference)
 { 
 revitid: 3
 building: ""
 level: ""
 room: ""
 viewid: 3302
 category: "Walls"
 family: "Basic Wall"
 symbol: "Wall-Ext_102"
},{
 revitid: 4
 building: ""
 level: ""
 room: ""
 viewid: 3303
 category: "Walls"
 family: "Basic Wall"
 symbol: "Wall-Ext_102"
}
];

[ //second array(difference)
 { 
 revitid: 5
 building: ""
 level: ""
 room: ""
 viewid: 3304
 category: "Walls"
 family: "Basic Wall"
 symbol: "Wall-Ext_102"
},{
 revitid: 6
 building: ""
 level: ""
 room: ""
 viewid: 3305
 category: "Walls"
 family: "Basic Wall"
 symbol: "Wall-Ext_102"
}
];
[ //first array(similar)
 { 
 revitid: 1
 building: ""
 level: ""
 room: ""
 viewid: 3300
 category: "Walls"
 family: "Basic Wall"
 symbol: "Wall-Ext_102"
},{
 revitid: 2
 building: ""
 level: ""
 room: ""
 viewid: 3301
 category: "Walls"
 family: "Basic Wall"
 symbol: "Wall-Ext_102"
}
];

[ //second array(similar)
 { 
 revitid: 1
 building: ""
 level: ""
 room: ""
 viewid: 3300
 category: "Walls"
 family: "Basic Wall"
 symbol: "Wall-Ext_102"
},{
 revitid: 2
 building: ""
 level: ""
 room: ""
 viewid: 3301
 category: "Walls"
 family: "Basic Wall"
 symbol: "Wall-Ext_102"
}
];


Now I need to pass these arrays in a html page and I can't cope with this task.
To pass to read.
1) the Button for categories, which opens when pressed. Categories can be multiple, for example, can be a category of walls and roofs.
2) In the open category should be a button for of family properties, which also opens.
3) In the open family should be a button for the property symbol.
4) After clicking the button with the symbol property, you should see a list of buttons according to the following criteria:
and. At the top should be a button from the first array, i.e. the first difference model. These buttons should have a purple background color and the method "onclick=`firstModel(${viewid})`".
b. Under the buttons from the first array should be a button in the second array, but they should have a green background and the method "onclick=`secondModel(${viewid})`".
C. Further have to follow the buttons from the third array having orange background color and the method "onclick=`firstModel(${viewid})`".
d. In the end will be the fourth button from the array that also has a orange background, but with the method "onclick=`secondModel(${viewid})`".

The result should be the list:
> category
> > family
> > > symbol
> > > > button
> > > > button
> > > > button
> > > > button

> other category
> > family
> > > symbol
> > > > button
> > > > button

I'm very grateful for the help. Thank you for your time, if you have any questions please contact.
March 23rd 20 at 19:11
1 answer
March 23rd 20 at 19:13
Solution
- Start with the element: document.createElement('elemTag')
- Set classes or attributes: elem.classList.add('someClass') or document.createAttribute("someAttr")
- Insert it in the page itself parentElem.appendChild(elem)

If anything, there are described in detail
Thank you very much. Could you give some instance of the code please? - Nat_Stok commented on March 23rd 20 at 19:16
@Nat_Stok, well the link if you pass there will be a lot of code and explanation on them - Jewell_Lyn commented on March 23rd 20 at 19:19
@Jewell_Lyn, I have a problem more complex, but what there is, and I have in the code is. - Nat_Stok commented on March 23rd 20 at 19:22
@Nat_Stok, if possible, better fill the code in the sandbox, and there are already describe what is missing / not working - Jewell_Lyn commented on March 23rd 20 at 19:25
@Jewell_Lyn, I would be very grateful if you could help with this problem, I seriously really need. Here is the code in the sandbox.

You need to generate a list on the above parameters. If you have any questions about formulated my problem I will be glad to answer them. - Nat_Stok commented on March 23rd 20 at 19:28
@Jewell_LynPurely for fun give a link to the already finished code, so in the end should look like my goal. I would be very happy if you suggest improvements or a better solution. - Nat_Stok commented on March 23rd 20 at 19:31
@Nat_Stok, you there is only the data. I don't see any code that might have something to add to the DOM. - Jewell_Lyn commented on March 23rd 20 at 19:34
@Jewell_Lyn, sorry, the link somehow disappeared. - Nat_Stok commented on March 23rd 20 at 19:37

Find more questions by tags JSONHTMLJavaScript