Upon loading my HTML page, the following information is displayed:
id: country url: http://data:8004/v1/entity/country name: countries description: All the countries in the world
id: states url: http://data:8004/v1/entity/states name: states data description: A catalog of all data
When clicking on a link, the resulting output is similar to this:
id: edbee2d36f35810d677085f6ec62e7153e96a423fa88b8d5ff2d473de0481e49
url:http://data:8004/v1/entity/county/edbee2d36f35810d677085f6ec62e7153e96a423fa88b8d5ff2d473de0481e49
type: country,
name: London,
legal: [object Object]
The data within Legal [{}] is not being returned.
Here is the structure of the JSON data:
[
{
"id": "edbee2d36f35810d677085f6ec62e7153e96a423fa88b8d5ff2d473de0481e49",
"url": "http://data:8004/v1/entity/county/edbee2d36f35810d677085f6ec62e7153e96a423fa88b8d5ff2d473de0481e499",
"type": "country",
"name": "London",
"legal": [
{
"type": "attribution",
"link": "https://en.wikipedia.org/"
}
]
},
How can I iterate through the nested array to retrieve the legal[{}] content?
Additionally, when clicking on a URL result, it displays new results without clearing the previous ones. Even after setting `results.innerHTML=';", the old results aren't cleared before loading new ones.
This is the code snippet in question:
const createElement = (tag, ...content) => {
const el = document.createElement(tag);
el.append(...content);
return el;
};
const setData = (entity) =>{
console.log(JSON.stringify(entity))
let entityProps = Object.keys(entity)
console.log(entityProps)
const dl = document.createElement('dl');
entityProps.forEach(function(prop) {
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("I'm working!")
console.log(e.target.innerHTML)
RetrieveData(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");
function RetrieveData(url){
fetch(url
, {
headers:{
'x-data': '78shjjhsjja-95ff-a6c0396bd619.b77738aa-f798-4bb9-93c4-914c5c83608c',
'x-access': 'access-data',
},
})
.then((res) => (res.ok ? res.json() : Promise.reject(res)))
.then((data) => {
results.append(
...data.flatMap((entry) => [
setData((entry)),
document.createElement("br"),
document.createElement("br"),
])
);
})
.catch(console.error);
}
const data=document.getElementById("data");
catalog.addEventListener("onclick", RetrieveData(`http://data:8004/v1/entity/`));