Не могу понять что должно получиться, но вот код который считывает json из внешнего файла
<!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)
}
});
Вот такой результат у меня
