{
"723": {
"title": "Solutions",
"id": 723,
"synthetic": false,
"parent": null,
"order": 2,
"color": "dataBlue",
"visible": true,
"active": false,
"collapsed": true,
"description": "Products or output delivered by IT and consumed by business units, architectures, customers & partners.",
"opexCapex": false,
"offerings": false,
"products": false,
"location": [],
"uid": "723-1665850712465",
"crumbs": [],
"children": [
818,
821,
822,
817,
820,
819
]
}
}
<!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">
<title>Document</title>
<style>
.parent{
display: flex;
}
.parent_child{
padding: 30px;
background: red;
margin: 10px;
}
</style>
</head>
<body>
<div class="parent"></div>
<script src="app.js"></script>
</body>
</html>
function readTextFile(file, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4 && rawFile.status == "200") {
callback(rawFile.responseText);
}
}
rawFile.send(null);
}
let parent = document.querySelector(".parent");
readTextFile("main.json", function(text){
var data = JSON.parse(text);
for(let i = 0; i<data["723"].children.length; i++){
let block = document.createElement("div");
block.classList.add("parent_child")
parent.append(block)
}
});