CODEWITHSUNDEEP
jqueryhtmlarraysjson
Mithun Uchil
Mithun Uchil

Reputation: 347

Displaying corresponding data from jQuery JSON on selecting from check-box

Have worked out a small code to allow me to click on a variable and showcase corresponding data for the same on clicking the button. However this does not seem to be happening and I'm not sure where I'm going wrong with it.

Would appreciate any help in this regard as I have reworked the code multiple times but to no avail.

<script>
    $(document).ready(function(){
        var StatJSON = {
            "Opt1":  {
                "Name": "Mat",
                "Parameter1": "65",
                "Parameter2": "30"
            },
            "Opt2": {
                "Name": "Mik",
                "Parameter1": "62",
                "Parameter2": "40"
            }
        };

        $('#btnSubmit').click(function(){
            $('input[type="checkbox"]:checked').each(function() {
                var this_input = $(this);
                if (this_input.is(':checked')){
                  resultString += [StatJSON.$(this).val()];
                }

                $('#divResult').html(resultString);
            }
        });
    });
</script>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    </head>

    <body>
        Options:
        <input type="checkbox" name="Station" value="Opt1">Option1
        <input type="checkbox" name="Station" value="Opt2">Option2
        <input type="checkbox" name="Station" value="Opt3">Option3
        <input id="btnSubmit" type="submit" value="submit" />
        <br /><br />
        
        <div id="divResult"></div>
    </body>
</html>

Upvotes: 1

Views: 51

Answers (4)

Mithun Uchil
Mithun Uchil

Reputation: 347

And especially to @Mohamed-Yousef. While the solution provided by @Mohamed-Yousef works perfectly, the only issue I'm still facing is that it gives me separate tables one below the other for each selection.

However, as the key element remains the same for all the selections, is there a way where the key element (row heading) appears in the same position for each selection and the values (column) keep appearing on the right side as a column every time a selection is made?? This would allow me to compare the elements in a single table for multiple selections which is what I desire to do.

Once again, many thanks for taking out the time and effort for these naive questions from a complete beginner.

Updated code:

        jQuery(document).ready(function( $ ){
            var StatJSON = {
            "Opt1":  {
                "Name": "Mat",
                "Parameter1": "65",
                "Parameter2": "30"
            },
            "Opt2": {
                "Name": "Mik",
                "Parameter1": "62",
                "Parameter2": "40"
            },
            "Opt3": {
                "Name": "Mir",
                "Parameter1": "65",
                "Parameter2": "90"
            }
        };

        $('#btnSubmit').click(function(){ 
        var resultString = '';
        $('input[type="checkbox"]:checked').each(function() {
        var this_input = $(this);
        if (this_input.is(':checked')){
        resultString += PrintHtml(StatJSON[$(this).val()]);
        }
        });
        $('#divResult').html(resultString);
        });
    });

    function PrintHtml(obj){
        var html='<div class="opt">';
        if (obj){
            $.each(obj, function(k,v){
                html += '<div>'+k+' : '+v+'</div>'; 
            });
        }
        html += '</div>';
        return html;
    }
         .opt{
             margin: 10px;
             padding: 10px;
             background: #eee;
             border: 1px solid #222;
         }
 <!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        </head>
   
    <body>
    Options:
    <input type="checkbox" name="Station" value="Opt1">Option1
    <input type="checkbox" name="Station" value="Opt2">Option2
    <input type="checkbox" name="Station" value="Opt3">Option3
    <input id="btnSubmit" type="submit" value="submit" />
    <br /><br />
    <div id="divResult"></div>
    </body>
    </html>

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

  • var resultString = ''; before .each
  • StatJSON[$(this).val()] instead of [StatJSON.$(this).val()];
  • $('#divResult').html(resultString); after the .each() loop .. if you need it inside use .append() instead of html()

$(document).ready(function(){
  var StatJSON = {
  "Opt1":  {
    "Name": "Mat",
    "Parameter1": "65",
    "Parameter2": "30"
  },
  "Opt2": {
    "Name": "Mik",
    "Parameter1": "62",
    "Parameter2": "40"
  }
  };
  $('#btnSubmit').click(function(){ 
    var resultString = '';
    $('input[type="checkbox"]:checked').each(function() {
      var this_input = $(this);
      if (this_input.is(':checked')){
        resultString += PrintHtml(StatJSON[$(this).val()]);
      }
    });
      $('#divResult').html(resultString);
  });
});


function PrintHtml(obj){
  var html='<div class="opt">'; // create div for opt with opt class
  if(obj){   // if obj is true
    $.each(obj ,function(k , v){  // loop through the obj and get key and value
      html += '<div>'+k +' : '+ v + '</div>';
    });
  }
  html += '</div>'; // close opt div
  return html;
}
.opt{
  margin : 10px;
  padding : 10px;
  background : #eee;
  border: 1px solid #222;
}
<html>
        <head>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        </head>

    <body>
    Options:
    <input type="checkbox" name="Station" value="Opt1">Option1
    <input type="checkbox" name="Station" value="Opt2">Option2
    <input type="checkbox" name="Station" value="Opt3">Option3
    <input id="btnSubmit" type="submit" value="submit" />
    <br /><br />
    <div id="divResult"></div>
    </body>
    </html>

Upvotes: 1

Miller Cy Chan
Miller Cy Chan

Reputation: 947

  1. Missing form tag
  2. Checkbox without end tag
  3. Get StatJSON using properties

$(document).ready(function(){
    var StatJSON = {
        "Opt1":  {
            "Name": "Mat",
            "Parameter1": "65",
            "Parameter2": "30"
        },
        "Opt2": {
            "Name": "Mik",
            "Parameter1": "62",
            "Parameter2": "40"
        }
    };
		
    $('#btnSubmit').click(function(){
        var resultString = '';
        $('input[type="checkbox"]:checked').each(function() {
            let opt = StatJSON[$(this).val()];
            if(opt)
                resultString += opt.Name;				
        });
        $('#divResult').html(resultString);
    });
});
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

<body>
<form onsubmit="return confirm('Submit?')">
    Options:
    <input type="checkbox" name="Station" value="Opt1" />Option1
    <input type="checkbox" name="Station" value="Opt2" />Option2
    <input type="checkbox" name="Station" value="Opt3" />Option3
    <input id="btnSubmit" type="submit" value="submit" />
</form>
<br /><br />
<div id="divResult"></div>
</body>
</html>

Upvotes: 1

Nithya Rajan
Nithya Rajan

Reputation: 4884

You should use square bracket notation [] to access the properties in an object / StatJson dynamically. You should also check before whether the property is in the object or not before assigning the value to the resultString

       $(document).ready(function(){
            var StatJSON = {
            "Opt1":  {
                "Name": "Mat",
                "Parameter1": "65",
                "Parameter2": "30"
            },
            "Opt2": {
                "Name": "Mik",
                "Parameter1": "62",
                "Parameter2": "40"
            }
        };

        $('#btnSubmit').click(function(){
            $('input[type="checkbox"]:checked').each(function() {
                var this_input = $(this);
                let resultString = '';
                if (this_input.is(':checked')){
                 if(StatJSON[$(this).val()]) {
                   resultString += StatJSON[$(this).val()]['Name'];
                 }
                 console.log(StatJSON[$(this).val()]);
                }
            $('#divResult').html(resultString);
            });
        });
    });
 
<html>
        <head>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        </head>

    <body>
    Options:
    <input type="checkbox" name="Station" value="Opt1">Option1
    <input type="checkbox" name="Station" value="Opt2">Option2
    <input type="checkbox" name="Station" value="Opt3">Option3
    <input id="btnSubmit" type="submit" value="submit" />
    <br /><br />
    <div id="divResult"></div>
    </body>
    </html>

Upvotes: 1

Related Questions