# Read Proprties and Hiding IFC File
###### tags: `BIM`
If you complete the previous section for create the Model with IFC.js.
We can keep going about IFC file reader.
## Read Proprties
:memo: The basic way to extract properties from an IFC is from the ID of an element. In many cases, when the user selects an element, we will want to get its direct and indirect properties.Previous tutorials have shown how to get that ID easily.
☝ Now that we have that ID, how hard it is to get the properties of an element? You only need to add one line of code to what we saw in the picking tutorial to be able to see the properties of the selected element when double clicking.
```javascript=
// Event that gets executed when an item is picked
async function pick(event) {
const found = cast(event)[0];
if (found) {
const index = found.faceIndex;
const geometry = found.object.geometry;
const ifc = ifcLoader.ifcManager;
const id = ifc.getExpressId(geometry, index);
const modelID = found.object.modelID;
const props = await ifc.getItemProperties(modelID, id);
console.log(JSON.stringify(props, null, 2));
}
}
```
you might get something like this:
```
{
"expressID": 6627,
"type": 3304561284,
"GlobalId": {
"value": "2idC0G3ezCdhA9WVjWe$O_",
"type": 1
},
"OwnerHistory": {
"value": 41,
"type": 5
},
"Name": {
"value": "Ventana simple:100 x 100 cm:164180",
"type": 1
},
"Description": null,
"ObjectType": {
"value": "Ventana simple:100 x 100 cm",
"type": 1
},
"ObjectPlacement": {
"value": 24958,
"type": 5
},
"Representation": {
"value": 6621,
"type": 5
},
"Tag": {
"value": "164180",
"type": 1
},
"OverallHeight": {
"value": 2.3,
"type": 4
},
"OverallWidth": {
"value": 1,
"type": 4
}
}
```
## Hiding
### index.html
```javascript=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/styles.css" />
<link rel="icon" href="./images.jfif">
<title>BIES IFC test</title>
</head>
<body>
<input type="file" id="file-input" accept=".ifc, .ifcXML, .ifcZIP">
<canvas id="three-canvas"></canvas>
<div class="checkboxes">
<div>
<input checked="true" id="IFCWALLSTANDARDCASE" type="checkbox" />
Walls
</div>
<div>
<input checked="true" id="IFCSLAB" type="checkbox" />
Slabs
</div>
<div>
<input checked="true" id="IFCWINDOW" type="checkbox" />
Windows
</div>
<div>
<input checked="true" id="IFCFURNISHINGELEMENT" type="checkbox" />
Furniture
</div>
<div>
<input checked="true" id="IFCDOOR" type="checkbox" />
Doors
</div>
<div>
<input checked="true" id="IFCMEMBER" type="checkbox" />
Curtain wall structure
</div>
<div>
<input checked="true" id="IFCPLATE" type="checkbox" />
Curtain wall plates
</div>
</div>
</body>
<script src="/bundle.js"></script>
</html>
```
### main.js
:package: Visibility in IFC.js is based on subset operations. This allows complex visualisations to be created with minimal memory usage. The first thing we are going to do is to define which IFC categories we are going to allow the user to show or hide.
📋📋📋 To save memory, categories in IFC.js are defined as numeric constants. So let's create an object that maps the name of those constants to their numeric value, and a function to retrieve them:
```javascript=
import { IFCWALLSTANDARDCASE, IFCSLAB, IFCDOOR, IFCWINDOW, IFCFURNISHINGELEMENT, IFCMEMBER, IFCPLATE } from "web-ifc";
// List of categories names
const categories = {
IFCWALLSTANDARDCASE,
IFCSLAB,
IFCFURNISHINGELEMENT,
IFCDOOR,
IFCWINDOW,
IFCPLATE,
IFCMEMBER,
};
// Gets the name of a category
function getName(category) {
const names = Object.keys(categories);
return names.find((name) => categories[name] === category);
}
// Gets the IDs of all the items of a specific category
async function getAll(category) {
const manager = ifcLoader.ifcManager;
return manager.getAllItemsOfType(0, category, false);
}
// Creates a new subset containing all elements of a category
async function newSubsetOfType(category) {
const ids = await getAll(category);
return ifcLoader.ifcManager.createSubset({
modelID: 0,
scene,
ids,
removePrevious: true,
customID: category.toString(),
});
}
// Stores the created subsets
const subsets = {};
async function setupAllCategories() {
const allCategories = Object.values(categories);
for (let i = 0; i < allCategories.length; i++) {
const category = allCategories[i];
await setupCategory(category);
}
}
// Creates a new subset and configures the checkbox
async function setupCategory(category) {
subsets[category] = await newSubsetOfType(category);
setupCheckBox(category);
}
// Sets up the checkbox event to hide / show elements
function setupCheckBox(category) {
const name = getName(category);
const checkBox = document.getElementById(name);
checkBox.addEventListener("change", (event) => {
const checked = event.target.checked;
const subset = subsets[category];
if (checked) scene.add(subset);
else subset.removeFromParent();
});
}
```
Sign in with Wallet
Connect another wallet