display data from json to html using jquery

I have a simple block I want to display buttons from json

Here is my json movies

{
    "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"
                }
            ]
        }
    ]
}

Here is my js for displaying buttons to the DOM

    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);
        }
    }
});

UPDATE

My solution is not working as expected, I had many for loops

I would like to display these buttons with all its attributes (top, left, width, height, buttonid, label etc;

What do I need to change to get this working?

3 answers

  • answered 2019-07-10 22:16 roll

    You have some miss variables errors. And some loops error, here is the solution

    1. Your code is not working.
    2. The reason you get 4 buttons is because you loop two times the array movie[j].buttons.buttoid which has two elements inside. so 2 times 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>
    
    

    and the live examle

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

  • answered 2019-07-10 22:19 claudio

    You have a few problems with your code, for instance buttoid should be buttonid and instead of $(videobtns).html(movie[j].buttons.buttoid); it needs to be something like movies[j].buttons[a].buttonid because movie is not a variable and you need to specify the buttons array index to access the buttonid property.

    I don't see why this code would produce 4 buttons with the given set of data beside it being executed twice.

    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;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="video-container"></div>

  • answered 2019-07-10 22:22 Robert

    You have loop errors (and naming errors) missing the index for the buttons: 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);
        }
    }