I am encountering an issue when trying to extract data from a nested array. The JSON object I have looks like this:
{
component: Assembly,
title: "Assembly",
path: "/assembly",
sections: {
title: "Frame Assembly",
steps: {
["Step 1"]: {
content:"step 1 content"
},
["Step 2"]: {
content: "step 2 content"
}
},
},
}
My aim is to use this data to create a navigation system. Below is the function I'm using for this purpose.
private BuildNavigation = (navItem: any) => {
const subSections = [];
const sections = navItem.sections;
for (const key in sections) {
if (sections.hasOwnProperty(key)) {
subSections.push(
<>
<ul>
<li key={key}><ScrollLink to={`${currentPath}#${key}`.toLowerCase()}>{sections[key].title}</ScrollLink></li>
{Object.getOwnPropertyNames(sections[key].steps).forEach((step: string) => {
// How do I return step
console.log(step);
})}
</ul>
</>
)
}
}
return subSections;
}
While I can successfully log the step information, I'm facing difficulty in pushing it into subSections.
I'm hoping for an output similar to the following:
<ul>
<li>
<a href="/assembly">Assembly</a>
<ul style="list-style-type: none; padding: 0px 0px 0px 10px;">
<li><a href="/assembly#frameassembly">Frame Assembly</a></li>
<ul>
<li><a href="/assembly#frameassembly-step-1">Step 1</a></li>
<li><a href="/assembly#frameassembly-step-2">Step 2</a></li>
</ul>
</ul>
</li>
</ul>
Your assistance will be greatly appreciated.