display checkbox with true value from json

Question

I have a simple section in which contains a simple block with checkbox from json

Now I am able to display blocks with checkbox, I am able to save state of checked box eg true or false to json on click, now I want to display these blocks with its state eg true or false. I am able to display blocks with checkboxes but I don't know how to display blocks with checkboxes state eg true or false here is json.

Here is json

{
    "movies": [
        {
            "left": 336.109375,
            "top": 78,
            "movieid": "1",
            "checkbox": true
        },
        {
            "left": 733.109375,
            "top": 79,
            "movieid": "3",
            "checkbox": false
        }
    ],
    "connections": []
}

Here is how I display the blocks

  addMovieBlock(title, flowchart[i].movieid, flowchart[i].left, flowchart[i].top, true, flowchart[i].checkbox);

Here i get this result

 console.log(flowchart[i].checkbox); 

Displays this

But what I want is this

UPDATE : addmovieBlock function

  // function for generating new block movie
    function addMovieBlock(title, id, left, top, addtojson, videoChecked) {
        var newMovieBlock = $('<div class="movie-block statemachine-demo node">' + title + ' <span class="remove"><i class="fa fa-trash" aria-hidden="true"></i></span></div>');
        newMovieBlock.attr("movieid", id);
        newMovieBlock.attr("id", "movieblock" + id);
        newMovieBlock.css("left", left + "px");
        newMovieBlock.css("top", top + "px");

        $(".main-container").append(newMovieBlock);

        if (addtojson == true) {
            schematJson.push({
                left: left,
                top: top,
                movieid: newMovieBlock.attr("movieid"),
            });
        }

        //for (var i = 0; i < schematJson.length; i++) {
            $('<input />', {
                type : 'checkbox',
                value: 'value'
            })
            .appendTo(newMovieBlock); 

       $('input[type=checkbox]').on('change', function(){
               $('input[type=checkbox]').prop("checked", false);
                $(this).prop("checked", true);

            videoChecked = $(this).parent().attr('movieid');


            for (var a = 0; a < schematJson.length; a++) {
                if (schematJson[a].movieid == videoChecked) {

                    schematJson[a].checkbox = true;

                }else{
                    schematJson[a].checkbox = false; 
                }

                var moviesparams = JSON.stringify({
                    moviesparams: schematJson
                });
                $.ajax({
                    type: 'POST',
                    data: {
                        moviesparams: moviesparams
                    },
                    url: 'save_movies_block.php',
                    success: function(data) {
                        $('#msg').html(data).fadeIn('slow');
                        $('#msg').delay(2000).fadeOut('slow');
                    },
                    error: function() {
                        $('#error-msg').html(data).fadeIn('slow');
                        $('#error-msg').delay(2000).fadeOut('slow');
                    }
                });
          }
        });
    }

What do I need to change to get what I want?

Answer 1

    //append checkbox in variable input 
  var input = $('<input />', {
                type : 'checkbox',
                value: 'value'
            });

           //if videoChecked (flowchart[i].checkbox) value is true add attr checked true
            if(videoChecked){
            input.attr('checked',true);
            }else{
            //if videoChecked value is false add attr checked false
            input.attr('checked',false);
            }
            input.appendTo(newMovieBlock);