Answer Happy

I have a nested array that looks like this (This is just a look
at what the array looks like): '
[
{
"id": "e153e96a423fa88b8d5ff2d473de0481e49",
"gender": "male",
"name": "Tom",
"legal": [
{
"type": "attribution",
"text": "A student of Geography",
}
]
},
{
"id": "89fjudjw88b8d5ff2d473de0481e49",
"gender": "male",
url: ...
"name": "Nate",
"legal": [
{
"type": "attribution",
"text": "A student of Maths",
}
]
}
]
I am using foreach to loop through and retrieve the data, but it
isn't looping through the ```legal[]``` nested array. Here's my
code. What am I missing?
const createElement = (tag, ...content) => {
const el = document.createElement(tag);
el.append(...content);
return el;
};
const RenderData = (entity) =>{
console.log(JSON.stringify(entity))
let entityProps = Object.keys(entity)
console.log(entityProps)
const dl = document.createElement('dl');
entityProps.forEach (prop => {
prop.childrenProp.forEach(propNode => {
const pre_id = document.createElement('pre');
const dt_id = document.createElement('dt');
dt_id.textContent = prop;
pre_id.appendChild(dt_id);
const dd_id = document.createElement('dd');
if (prop == "url") {
const link = document.createElement('a');
link.textContent = entity[prop];
link.setAttribute('href', '#')
link.addEventListener('click',function(e) {
console.log("A working one!")
console.log(e.target.innerHTML)
FetchData(e.target.innerHTML)
});
dd_id.appendChild(link);
} else {
dd_id.textContent = entity[prop];
}
pre_id.appendChild(dd_id);
dl.appendChild(pre_id);
});
return dl;
}}
const results = document.getElementById("results");
// empty the <div> for a fresh start
results.innerHTML = '';
function RetrieveData(url){
// const url = `http://bbk-consumer:8003/v1/entity/`;
//http request
fetch(url
)
.then((res) => (res.ok ? res.json() :
Promise.reject(res)))
.then((data) => {
results.append(
...data.flatMap((entry) => [
renderData((entry)),
document.createElement("br"),
document.createElement("br"),
])
);
})
.catch(console.error);
}