How to pass object from js file to html page?

Question

JavaScript

Good afternoon. I have a somewhat complicated problem, I will try to describe as clearly as possible.
So, I get two objects from the server for my two models. These objects contain category fields, last names, model element identifiers, and so on. By filtering, I get 4 arrays. The first and second arrays store unique identifiers, while the third and fourth arrays store duplicate identifiers. The first array contains a unique identifier for the first model. in the second - unique for the second array, and in the third and fourth - common elements for them, respectively.
To illustrate this, I will 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 from the code, the first two revitids are the same, and the last ones are different. As a result, by filtering, I 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 to html page and I can't handle this task.
You need to send it like this.
1) A button for categories that opens when clicked. There may be several categories, for example, there may be a category of walls and roofs.
2) In an open category, there should be a button for the family property, which also opens.
3) The open family must have a button for the symbol property.
4) After pressing the button with the symbol property, a list of buttons should open, according to the following features:
a. At the very top there should be a button from the first array, i.e. differences in the first model. These buttons should have purple background color and "onclick=`firstModel(${viewid})`" method.
b. Buttons from the first array should be under the buttons of the second array, but they should have a green background and the "onclick=`secondModel(${viewid})`" method.
with. Next should be buttons from the third array, with an orange background color and the "onclick=`firstModel(${viewid})`" method.
d. At the end there will be buttons from the fourth array, also with an orange background, but with the "onclick=`secondModel(${viewid})`" method.
The list should look like this:
> category
> > family
> > > symbol
> > > > button
> > > > button
> > > > button
> > > > button
> other category
> > family
> > >
thanks for the help. Thank you for your time, if you have any questions please feel free to contact.

Answer 1

- Start by creating the desired element: document.createElement('elemTag')
- Give it classes or attributes: elem.classList.add('someClass')or document.createAttribute("someAttr")
- Insert it into the page itself parentElem.appendChild(elem)
If anything, it 's described in more detail here