Creating objects with complex variables from checkbox

Question

I have a checkbox, each checkbox has a value of something like this: "case-color-id"

e.g.

case1-red-1
case2-blue-2
case1-blue-4
case3-green-3

What i'm trying to do is to create a json with those values. The end result would be something like:

cases:[
    {
      case1:[
             {
               id : '1'
               color: 'red'
             },
             {
               id: '4'
               color: 'blue'
             }
            ],
      case2:[
             {
               id : '2'
               color: 'blue'
             }
            ],
      case3:[
             {
               id : '3'
               color: 'green'
             }
            ]       
       }
      ]

I need help on the logic in inserting the objects with jquery/javascript

$('#checkbox :checkbox:checked').each(function (index, element) {

        var case = $('this').val().split('-')[0];
        var color = $('this').val().split('-')[1];
        var id = $('this').val().split('-')[2];

   var caseHolderObject = new Object();

   // create objects here and insert the values depending which case it belongs to

   // Then get the jsonString
   var jsonString = JSON.stringify(caseHolderObject));

}

FYI there's no such thing as a 'JSON object', they're just plain old objects — Rory McCrossan
– Rory McCrossan, Commented Feb 12, 2015 at 7:41

codingrose · Accepted Answer · 2015-02-12 08:03:57Z

2

var cases = [{}];
$('#checkbox :checkbox:checked').each(function (index, element) {
    var cas = $(this).val().split('-')[0];
    var color = $(this).val().split('-')[1];
    var id = $(this).val().split('-')[2];
    var obj = {
        id: id,
        color: color
    };
    var ary = [obj];
    if (cases[0][cas]) {
        cases[0][cas].push(obj);
    } else {
        cases[0][cas] = ary;
    }
});
var jsonString = JSON.stringify(cases);

See working DEMO.

answered Feb 12, 2015 at 8:03

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

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

Comments

pedrov · Accepted Answer · 2015-02-12 12:16:50Z

0

check this script i tried most of your requirement in it , if you need updates let me know :

    function retriever(){
var caseObject = new Object();
$(':checkbox:checked').each(function () {

   var caseHolderObject = new Object();
   var caseVal = $(this).val().split('-')[0];
    var color = $(this).val().split('-')[1];
    var id = $(this).val().split('-')[2];
caseHolderObject['color']=color;
caseHolderObject['id']=id;
    caseObject[caseVal]=caseHolderObject;
});

   var jsonString = JSON.stringify(caseObject);
    alert(jsonString);
}


HTML :
<input type="checkbox" value="case1-red-1">
<input type="checkbox" name="case1" value="case2-red-2">
<input type="checkbox" name="case2" value="case4-red-4">
<input type="checkbox" name="case3" value="case3-red-3">
<button onclick="retriever()">here</button>

edited Feb 12, 2015 at 12:16

answered Feb 12, 2015 at 8:03

pedrov

357 bronze badges

1 Comment

empiric Over a year ago

please feel free to add your code to the answer and add a clickable link. If your fiddle will stop working, your answer gets useless

Collectives™ on Stack Overflow

Creating objects with complex variables from checkbox

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related