Expandable Object Tree View
index.html
and script.js
have already been provided in the VM. In general, you only need to add code to script.js
and style.css
.
The following code renders a collapsible tree view of a JSON object or array. By using the useState()
hook to create the isToggled
state variable, you can determine the initial state of the content (collapsed/expanded) by passing the toggled
prop. The appearance of the component is determined based on isParentToggled
, isToggled
, name
, and checking for Array.isArray()
on data
.
For each child in data
, determine if it is an object or array and recursively render a sub-tree or a text element with the appropriate style. To toggle the component state, render a <span>
element and bind its onClick
event to alter the component's isToggled
state.
The CSS styles are defined for the component's appearance, including margin
, position
, border
, and display
properties.
const TreeView = ({
data,
toggled = true,
name = null,
isLast = true,
isChildElement = false,
isParentToggled = true
}) => {
const [isToggled, setIsToggled] = React.useState(toggled);
const isDataArray = Array.isArray(data);
return (
<div
className={`tree-element ${isParentToggled && "collapsed"} ${
isChildElement && "is-child"
}`}
>
<span
className={isToggled ? "toggler" : "toggler closed"}
onClick={() => setIsToggled(!isToggled)}
/>
{name ? <strong> {name}: </strong> : <span> </span>}
{isDataArray ? "[" : "{"}
{!isToggled && "..."}
{Object.keys(data).map((v, i, a) =>
typeof data[v] === "object" ? (
<TreeView
key={`${name}-${v}-${i}`}
data={data[v]}
isLast={i === a.length - 1}
name={isDataArray ? null : v}
isChildElement
isParentToggled={isParentToggled && isToggled}
/>
) : (
<p
key={`${name}-${v}-${i}`}
className={isToggled ? "tree-element" : "tree-element collapsed"}
>
{isDataArray ? "" : <strong>{v}: </strong>}
{data[v]}
{i === a.length - 1 ? "" : ","}
</p>
)
)}
{isDataArray ? "]" : "}"}
{!isLast ? "," : ""}
</div>
);
};
.tree-element {
margin: 0 0 0 4px;
position: relative;
}
.tree-element.is-child {
margin-left: 16px;
}
div.tree-element::before {
content: "";
position: absolute;
top: 24px;
left: 1px;
height: calc(100% - 48px);
border-left: 1px solid gray;
}
p.tree-element {
margin-left: 16px;
}
.toggler {
position: absolute;
top: 10px;
left: 0px;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid gray;
cursor: pointer;
}
.toggler.closed {
transform: rotate(90deg);
}
.collapsed {
display: none;
}
const data = {
lorem: {
ipsum: "dolor sit",
amet: {
consectetur: "adipiscing",
elit: [
"duis",
"vitae",
{
semper: "orci"
},
{
est: "sed ornare"
},
"etiam",
["laoreet", "tincidunt"],
["vestibulum", "ante"]
]
},
ipsum: "primis"
}
};
ReactDOM.createRoot(document.getElementById("root")).render(
<TreeView data={data} name="data" />
);
Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.