Я хочу отображать данные json на HTML-странице w.r.t. кадр, который я получу из видео.
Я пишу формат json, который хочу на странице HTML:
frame : 1 ▼
object_detected : 1
object_classname : car ▼
co-ordinates:
x : 20
y : 45
width : 300
height : 100
frame : 2 ▼
object_detected : 2
object_classname : car ▼
co-ordinates:
x : 20
y : 45
width : 300
height : 100
object_class : car ▼
co-ordinates:
x : 24
y : 5
width : 70
height : 10
► / ▼ - это сплошная стрелка вниз, пользователь должен вручную щелкнуть там (►), и (▼) отобразятся данные, которые они содержат.
данные файла json:
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,
},
}]
@ user3808826 извините, но это была моя ошибка, это должно быть Object_classname вместо Object_class



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


РЕДАКТИРОВАТЬМаттиас Шмидт добавил в мой код функцию изменения стрелок
Я сделал этот фрагмент. Это то, что вы ищите? Вы также можете проверить это на 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 = '<div class = "wrapper" id='+ index +'>' +
'<div class = "frame">'+ frame +'</div>' +
'<div class = "subWrapper">' +
'<div class = "objects">'+ objects +'</div>' +
'</div>' +
'</div>' +
'</div>';
return template;
}
function getSubTemplate(className, x, y, width, height){
let subTemplate = '<div class = "className">'+ className +'</div>' +
'<div class = "subSubWrapper">' +
'<div class = "co-ordinates"></div>' +
'<div class = "subSubSubWrapper">' +
'<div class = "x">'+ x +'</div>' +
'<div class = "y">'+ y +'</div>' +
'<div class = "width">'+ width +'</div>' +
'<div class = "height">'+ height +'</div>' +
'</div>';
return subTemplate;
}
for(var i = 0; i < data.length; i++){
var frameCount = data[i].Frame_count;
if (data[i].Objects_detected > 0){
var objectsDetected = data[i].Objects_detected;
if (data[i].Objects_classname){
var objectsClassname = data[i].Objects_classname;
}
if (data[i].output.x){
var x = data[i].output.x;
}
if (data[i].output.y){
var y = data[i].output.y;
}
if (data[i].output.width){
var width = data[i].output.width;
}
if (data[i].output.height){
var height = data[i].output.height;
}
$(".content").append(getTemplate(i, frameCount, objectsDetected));
for(var ii = 0; ii < data[i].Objects_detected; ii++){
$(".wrapper#"+i).find(".subWrapper").append(getSubTemplate(objectsClassname, x, y, width, height));
}
} else {
$(".content").append(getTemplate(i, frameCount, 0));
}
}
$(".frame").on("click", function(){
var $clickedParent = $(this).parent();
$(this).toggleClass("open");
var $subWrapper = $clickedParent.find(".subWrapper");
if ($subWrapper.css("display") == "none"){
$subWrapper.css("display", "block");
} else if ($subWrapper.css("display") == "block"){
$subWrapper.css("display", "none");
}
});
$(".className").on("click", function(){
var $toOpen = $(this).next();
$(this).toggleClass("open");
if ($toOpen.css("display") == "none"){
$toOpen.css("display", "block");
$toOpen.children().css("display", "block");
} else if ($toOpen.css("display") == "block"){
$toOpen.css("display", "none");
$toOpen.children().css("display", "none");
}
});@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;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "content">
</div>Я быстро добавил функцию изменения стрелки в ваш фрагмент: jsfiddle.net/hkedLpbq
но почему данные кадра 2 не печатаются, то есть «x»: 20, «y»: 45, «width»: 300, «height»: 100, '
Я отремонтирую. Дай мне секунду.
Взгляните на эту скрипку jsfiddle.net/hkedLpbq/19 В js-коде вы можете увидеть переменную frameToShow. Установите, в каком кадре вы хотите показать. (Номер 1 покажет 1-й кадр, номер 2 покажет 2-й и так далее)
@David, можете ли вы сделать то же самое для этого формата JSON: `{" Frame_count ": 1," Objects_detected ": 2, output: [{" Objects_classname ":" car "," x_val ": 82.9883," y_val ": 197.56245 , "width": 316.03088, "height": 197.45451}, {"Objects_classname": "car", "x_val": 522.4823, "y_val": 170.47263, "width": 64.66687, "height": 61.78085}], " Total_objects_detected ": 2,}`
здесь кто-нибудь знает, как преобразовать. Потому что я новичок в HTML и JavaScript.
@MatthiasSchmidt, не могли бы вы помочь?
Привет, @disheetpithadia, извините за то, что не ответил. Взгляните на эту скрипку jsfiddle.net/8np04j2b
откуда взялось "object_class: car" :-)