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?

What does addMovieBlock do ? You probably are not setting the checked property of the checkbox to the value from the json. — SScotti
– SScotti, Commented Jul 8, 2019 at 18:36
You need to provide the code for addMovieBlock for somebody to be able to determine what the problem is. If I were to take a guess, I reckon you're probably doing <input type="checkbox" checked="${checked}" /> whereas it should be <input type="checkbox" ${checked ? "checked" : ""} /> developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… — Richard Scarrott
– Richard Scarrott, Commented Jul 8, 2019 at 18:36
Hii guys sorry for not adding addblock function, I have added the function as @sscoti requested — The Dead Man
– The Dead Man, Commented Jul 8, 2019 at 18:47

Shivendra Singh · Accepted Answer · 2019-07-08 19:26:36Z

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

edited Jul 8, 2019 at 19:26

answered Jul 8, 2019 at 19:09

Shivendra Singh

2,9731 gold badge13 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

The Dead Man Over a year ago

Hi brother so close now it shows but with both blocks checked here is live demo, only checkbox with true value should be checked not both, u can see it yourself videomill-bot.audiencevideo.com/editor/?settings2

Shivendra Singh Over a year ago

See, If flowchart[i].checkbox is true then checkbox will be checked if it's false then checkbox will not be checked

Shivendra Singh Over a year ago

I update the code check. Before i was checking for addtojson parameter. It should be 'videoChecked'

The Dead Man Over a year ago

let me check , I willbe back

The Dead Man Over a year ago

Now both are not displaying here is videomill-bot.audiencevideo.com/editor/?settings2 check the console.log

|

Collectives™ on Stack Overflow

display checkbox with true value from json

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related