使用jquery将json中的数据显示为html

rkkpypqq 于 2022-11-03 发布在 jQuery

关注(0)|答案(3)|浏览(231)

我有一个简单的块，我想显示来自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循环。

我想显示这些按钮及其所有属性（顶部、左侧、宽度、高度、按钮ID、标签等）;
我需要做哪些更改才能使其正常工作？

jquery

来源：https://stackoverflow.com/questions/56979197/display-data-from-json-to-html-using-jquery

3条答案

按热度按时间

bnl4lu3b1#

您的代码有一些问题，例如buttoid应该是buttonid，而不是$(videobtns).html(movie[j].buttons.buttoid);，它应该是类似movies[j].buttons[a].buttonid的内容，因为movie不是变量，您需要指定buttons数组索引来访问buttonid属性。
我不明白为什么这段代码会产生4个按钮，旁边有一组给定的数据，执行两次。
第一个

赞(0）回复(0）举报 2022-11-03

eiee3dmh2#

你有一些丢失变量的错误。还有一些循环错误，下面是解决方法
1.您的代码不起作用。
1.你得到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

赞(0）回复(0）举报 2022-11-03

gkn4icbw3#

您有循环错误（和命名错误），缺少按钮索引：数据.影片[j].按钮[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);
    }
}

赞(0）回复(0）举报 2022-11-03

我来回答

使用jquery将json中的数据显示为html

3条答案

相关问题

热门标签

最新问答