Question

我有一个简单的块，我想显示json中的按钮

这是我的json电影

{
    "movies": [
        {
            "title": "Mena",
            "movieid": "1",
            "movie_url": "videos\/mena.mp4",
            "buttons": [
                {
                    "left": 556,
                    "top": 231,
                    "start_time": 5.44,
                    "end_time": 6.76,
                    "width": 162,
                    "height": 73,
                    "buttonid": "1",
                    "label": "No"
                },
                {
                    "left": 200,
                    "top": 200,
                    "start_time": 5.56,
                    "end_time": 6.56,
                    "width": 162,
                    "height": 100,
                    "buttonid": "2",
                    "label": "Yes"
                }
            ]
        }
    ]
}

这是我的用于显示DOM按钮的js

    for(var j=0; j<movies.length; j++){
        for(a=0; a< movies[j].buttons.length; a++){

            var videobtns = $("<div class='video-btns'></div>")
            $(videobtns).html(movie[j].buttons.buttoid);
            $("#video-container").append(videobtns);
        }
    }
});

更新

我的解决方案无法正常工作，我有很多for循环

我想显示这些按钮及其所有属性（顶部，左侧，宽度，高度，buttonid，标签等；

要使此功能生效，我需要更改什么？

Answer 1

您的代码有一些问题，例如buttoid应该是buttonid，而不是$(videobtns).html(movie[j].buttons.buttoid);，它必须像movies[j].buttons[a].buttonid一样，因为{{1} }不是变量，您需要指定movie数组索引才能访问buttons属性。

我不明白为什么这段代码会产生4个带有给定数据集的按钮，并且两次执行两次。

buttonid

var json = {
    "movies": [
        {
            "title": "Mena",
            "movieid": "1",
            "movie_url": "videos\/mena.mp4",
            "buttons": [
                {
                    "left": 556,
                    "top": 231,
                    "start_time": 5.44,
                    "end_time": 6.76,
                    "width": 162,
                    "height": 73,
                    "buttonid": "1",
                    "label": "No"
                },
                {
                    "left": 200,
                    "top": 200,
                    "start_time": 5.56,
                    "end_time": 6.56,
                    "width": 162,
                    "height": 100,
                    "buttonid": "2",
                    "label": "Yes"
                }
            ]
        }
    ]
};  
  
for(var j = 0; j < json.movies.length; j++){
  for(a=0; a < json.movies[j].buttons.length; a++){
    var videobtns = $("<div class='video-btns'></div>");
    $(videobtns).html(json.movies[j].buttons[a].buttonid);
    $("#video-container").append(videobtns);
  }
}

.video-btns {
  background: blue;
  padding: 10px;
  margin: 10px;
  width: 10px;
  height: 10px;
  color: white;
}

Answer 2

您有一些未命中变量错误。还有一些循环错误，这是解决方法

您的代码不起作用。
获得4个按钮的原因是因为您循环了两次movie[j].buttons.buttoid数组，该数组里面有两个元素。所以2乘2 = 4。

<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.1/flatpickr.css">
</head>
    <body>
        <div id="video-container">
        </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.1/flatpickr.js"></script>
    <script>
        $(document).ready(function(){
          var movies = [
                {
                    "title": "Mena",
                    "movieid": "1",
                    "movie_url": "videos\/mena.mp4",
                    "buttons": [
                        {
                            "left": 556,
                            "top": 231,
                            "start_time": 5.44,
                            "end_time": 6.76,
                            "width": 162,
                            "height": 73,
                            "buttonid": "1",
                            "label": "No"
                        },
                        {
                            "left": 200,
                            "top": 200,
                            "start_time": 5.56,
                            "end_time": 6.56,
                            "width": 162,
                            "height": 100,
                            "buttonid": "2",
                            "label": "Yes"
                        }
                    ]
                }
            ]
            for(var j=0; j<movies.length; j++){
                var currMovie = movies[j]
                for(a=0; a< currMovie.buttons.length; a++){
                    var currBtn = currMovie.buttons[a];
                    var videobtns = $("<div class='video-btns'></div>")
                    $(videobtns).html(currBtn.buttonid + currBtn.label);
                    $("#video-container").append(videobtns);
                }
            }       
        });
    </script>
    </body>
</html>

和现场例子

https://codepen.io/rollrodrig/pen/YoBJJX

Answer 3

您有循环错误（和命名错误）缺少按钮的索引： data.movies [j] .buttons [a]

var data = {
    "movies" : [
    {
        "title": "Mena",
        "movieid": "1",
        "movie_url": "videos\/mena.mp4",
        "buttons": [
    {
        "left": 556,
        "top": 231,
        "start_time": 5.44,
        "end_time": 6.76,
         "width": 162,
        "height": 73,
        "buttonid": "1",
        "label": "No"
    },
    {
        "left": 200,
        "top": 200,
        "start_time": 5.56,
        "end_time": 6.56,
        "width": 162,
        "height": 100,
        "buttonid": "2",
        "label": "Yes"
    }
]
}
]
}


for(var j=0; j<data.movies.length; j++){
    for(a=0; a< data.movies[j].buttons.length; a++){
        var videobtns = $("<div class='video-btns'>" + data.movies[j].buttons[a].buttonid + "</div>")
        $("#video-container").append(videobtns);
    }
}

使用jQuery显示从JSON到HTML的数据

3 个答案: