How to uncheck checkbox input value or array of input values with jquery

Checkbox input value

In this post I would like to show you how to uncheck input or array of inputs through input value:

  1. Example:
    Insert this input tag into body:

    <body>
       <input type="checkbox" name="cbname" value="test" checked="checked" />
    </body>
  2. To uncheck the checkbox if value is = to a variable for instance “test” you can do this:
    $('input:checkbox[value="test"]').attr('checked', false);
    //or
    $('input:checkbox[value="test"]').prop('checked', false);
  3. To uncheck array of inputs from object’s array or from json array:
    Example:

    <body>
       <input type="checkbox" name="personsName" id="" value="test1" checked="checked" />
       <input type="checkbox" name="personsName" id="" value="test2" checked="checked" />
    </body>


    If we have a json of strings first you have to use JSON.parse to create an object from a string

    var data = [{id: 1, cbvalue:'test1'}, {id: 2, cbvalue:'test2'}]
    var string = JSON.stringify(data)
    var objects = JSON.parse(data)

    Foreach loop and uncheck inputs

    objects.forEach(function(key, index){
      $('input:checkbox[value="' + key.cbvalue + '"]').attr('checked', false);
    });

Reference link: http://stackoverflow.com/questions/4957608/jquery-if-checkbox-value-test-uncheck

How to parse json array in javascript

Parse JSON

A common use of JSON is to read data from a web server, and display the data in a web page:

  1. JavaScript files needed:
    Insert these scripts into <head> tag:

    <head>
       //download this js from "http://jquery.com/download/"
       <script src="js/jquery.min.js"></script>
    </head>
  2. To convert object to string
    Use JSON.stringify to create a string from a object

    var data = [{id: 1, name:'personsName'}, {id: 2, name:'personsName2'}]
    var string = JSON.stringify(data)
  3. To convert string to object
    Use JSON.parse is to create an object from a string

    var data = [{id: 1, name:'personsName'}, {id: 2, name:'personsName2'}]
    var string = JSON.stringify(data)
    var objects = JSON.parse(data)

    Foreach loop

    objects.forEach(function(key, index){
      console.log(key.id);
      console.log(key.name); 
    });

Reference link: http://stackoverflow.com/questions/23068875/parse-json-array-in-jquery-in-foreach-loop

How to sort array on key value in javaScript using Prototype library

We  can sort a JSON  array using this method:

  1. This is the method to sort the array:
    Array.prototype.sortOn = function(key){
        this.sort(function(a, b){
            if(a[key] < b[key]){
                return -1;
            }else if(a[key] > b[key]){
                return 1;
            }
            return 0;
        });
    }
    
    
  2. How to sort the array with data? Just do:
    var arr = [{name:'bob', artist:'rudy'},{name:'johhny', artist:'drusko'},{name:'tiff', artist:'needell'},{name:'top', artist:'gear'}];
    arr.sortOn("name");
    arr.sortOn("artist");

If we want to convert the array to JSON we have to do this:

  1. var array = [];
    for ( var i=1 ; i< arr.length; i++ ){
            var mComponente = {
    	        name	: 'bob',
    	        artist  : 'rudy',
    	};
            array.push(mComponente);
    }
    
    // convert array into JSON array
    var jsonArray = $.parseJSON(JSON.stringify(array));
    

Reference link: http://stackoverflow.com/questions/16648076/sort-array-on-key-value

jQuery form autofill

Simply autofill an empty form using JSON data:

  1. We need a form:
    <form id="f">
        name <input type="text" name="name">
        email <input type="text" name="email">
        love jQuery
        <input type="radio" name="lovejquery" value="yes"> yes
        <input type="radio" name="lovejquery" value="no"> no
    </form>
  2. and data:
    var data = {
        "name": "John Doe",
        "email": "johndoe@mail.com",
        "lovejquery": "yes"
    }
  3. How to autofill the form with data? Just do:
    $("#f").autofill( data );

Reference link: http://labs.creative-area.net/jquery.formautofill/doc/

ENCODE AND DECODE JSON TEXT FROM JAVA TO JAVASCRIPT – USING MAP

JSON.simple is a simple Java toolkit for JSON. You can use JSON.simple to encode or decode JSON text.

  1. Mapping between JSON and JAVA entities:
    JSON Java
    object java.util.Map
  2. Example:
    //import org.json.simple.JSONValue;
    Encode a java.util.List in Java
    Java:

      Map<String, String> obj = new LinkedHashMap()<String, String>;
      obj.put("name","foo");
      obj.put("num",new Integer(100));
      obj.put("balance",new Double(1000.21));
      obj.put("is_vip",new Boolean(true));
      obj.put("nickname",null);
    
      String jsonText = JSONValue.toJSONString(obj);

    Decode it in JavaScript using LinkedHashMap

    JavaScript:

      var js_obj = JQuery.parseJSON(jsonText);
      // or var js_obj = JSON.parse(jsonText);
      var name = js_obj[name];
      var num = js_obj[num];
    
      // to see if key exists
      var key = "name";
      if( key in js_obj )

Reference Link: https://code.google.com/p/json-simple/
Reference Link: http://api.jquery.com/jQuery.parseJSON/
Reference Link: http://www.jquerysdk.com/api/jQuery.toJSON

Encode and Decode JSON text from Java to JavaScript – Using List

JSON.simple is a simple Java toolkit for JSON. You can use JSON.simple to encode or decode JSON text.

  1. Mapping between JSON and JAVA entities: 
    JSON Java
    string java.lang.String
    number java.lang.Number
    true|false java.lang.Boolean
    null null
    array java.util.List
    object java.util.Map
  2. Example:
    //import org.json.simple.JSONObject;
    Encode a java.util.List in Java
    Java:

      JSONObject obj = new JSONObject();
      obj.put("name","foo");
      obj.put("num",new Integer(100));
      obj.put("balance",new Double(1000.21));
      obj.put("is_vip",new Boolean(true));
      obj.put("nickname",null);
    
      String jsonText = JSONValue.toJSONString(obj);

    Decode it in JavaScript using JSONObject

    JavaScript:

      var js_obj = JQuery.parseJSON(jsonText);
      var name = js_obj[0].name;
      var num = js_obj[0].num;

Reference Link: https://code.google.com/p/json-simple/
Reference Link: http://api.jquery.com/jQuery.parseJSON/
Reference Link: http://www.jquerysdk.com/api/jQuery.toJSON