EDIT Matthias Schmidt добавил функцию смены стрелок к моему коду
Я сделал этот фрагмент. Это то, что вы ищите? Вы также можете проверить его на https://jsfiddle.net/hkedLpbq/8/
var data = [
{
"Frame_count":1,
"Objects_detected":1,
"Objects_classname":"car",
output:{
"x":20,
"y":45,
"width":300,
"height":100,
},
},
{
"Frame_count":2,
"Objects_detected":2,
"Objects_classname":"car",
output:{
"x":20,
"y":45,
"width":300,
"height":100,
"x":25,
"y":5,
"width":70,
"height":10,
},
}];
function getTemplate(index, frame, objects){
let template = '' +
''+ frame +'' +
'' +
''+ objects +'' +
'' +
'' +
'
@charset "UTF-8";
body {
font-family: sans-serif;
}
*:before, *:after {
color: #3a3a3a;
font-weight: bold;
}
.wrapper {
width: 100%;
color: #e24444;
}
.wrapper .frame:before {
content: "Frame: ";
}
.wrapper .frame:after {
content: " ►";
}
.wrapper .subWrapper {
margin-left: 10%;
display: none;
}
.wrapper .subWrapper .objects:before {
content: "Objects Detected: ";
}
.wrapper .subWrapper .className:before {
content: "Class Name: ";
}
.wrapper .subWrapper .className:after {
content: " ►";
}
.wrapper .open:after {
content: " ▼" !important;
}
.wrapper .subSubWrapper {
margin-left: 20%;
display: none;
}
.wrapper .subSubWrapper .co-ordinates:before {
content: "Co-ordinates: ";
}
.wrapper .subSubSubWrapper {
margin-left: 30%;
display: none;
}
.wrapper .subSubSubWrapper .x:before {
content: "X: ";
}
.wrapper .subSubSubWrapper .y:before {
content: "Y: ";
}
.wrapper .subSubSubWrapper .width:before {
content: "Width: ";
}
.wrapper .subSubSubWrapper .height:before {
content: "Height: ";
}
.visible {
display: block;
}