include values in a javascript string with '+='

Question

I've following function:

function generateJSONstringforuncheckedfilters(){
    jsonstring = '';
    jsonstring = "[";
    $('body').on('click', 'input', function(){
        jsonstring += "[{'OrderGUID': '"+ $(this).attr('data-orderguid') +"' 'FilterGUID': '"+ $(this).attr('data-filterguid') +"', 'nValue': 0, 'Value': '"+ $(this).attr('value') +"', 'Operator': 'NULL', 'Unit': 'NULL'}";
    });
    jsonstring += "]";
    console.log(jsonstring); // Output: []
}

My output is this = [ ]

But I want to achieve this:

[{'OrderGUID': '46dd8c82-44a6-4dc5-9517-320c31645211' 'FilterGUID': '17caabea-c313-48c9-b965-739ef8d09a1f', 'nValue': 0, 'Value': 'volladressierbar', 'Operator': 'NULL', 'Unit': 'NULL'}]

And if I click again into a checkbox field the jsonstring have to expand like this:

[
{'OrderGUID': 'aaaaaa' 'FilterGUID': '17caabea-c313-48c9-b965-739ef8d09a1f', 'nValue': 0, 'Value': 'volladressierbar', 'Operator': 'NULL', 'Unit': 'NULL'},
{'OrderGUID': 'bbbbbb' 'FilterGUID': '17caabea-c313-48c9-b965-739ef8d09a1f', 'nValue': 0, 'Value': 'volladressierbar', 'Operator': 'NULL', 'Unit': 'NULL'}
]

I hope you understand my problem.

Edit:

These are my checkboxes:

<input type="checkbox" checked="checked" id="check1" value="volladressierbar" name="volladressierbar" data-filterguid="17caabea" data-orderguid="aaaa" count="1"> volladressierbar
<input type="checkbox" checked="checked" id="check1" value="teiladressierbar" name="teiladressierbar" data-filterguid="18cagbea" data-orderguid="bbbb" count="1"> teiladressierbar

Trying to build a JSON string yourself is quite sensitive to errors, it's better to use JSON.stringify and JSON.parse for that purpose and just build regular JS objects and arrays instead. — SidOfc
– SidOfc, Commented Jan 8, 2016 at 8:49
Try to trigger the function when the input is onclick jsfiddle.net/w0wyrp2z — R Lam
– R Lam, Commented Jan 8, 2016 at 8:51
You're logging when the function is called, not when the user clicks on the boxes. — Barmar
– Barmar, Commented Jan 8, 2016 at 10:45

Gytis Tamulynas · Accepted Answer · 2016-01-08 09:44:03Z

3

You could try something like so:

var uncheckedFilters = [];

function generateJSONstringforuncheckedfilters(){
    $('body').on('click', 'input', function() {
        var checkboxSelector = $(this);
        var checkboxFilterGUID = checkboxSelector.attr('data-filterguid');
        if(checkboxSelector.is(':checked')) {
            uncheckedFilters.forEach(function(filter) {
                if(filter.FilterGUID === checkboxFilterGUID) {
                    var filterIndex = uncheckedFilters.indexOf(filter);
                    if(filterIndex > -1) {
                        uncheckedFilters.splice(filterIndex, 1);
                    }
                }
            });
        } else {
            uncheckedFilters.push({
                OrderGUID: checkboxSelector.attr('data-orderguid'),
                FilterGUID: checkboxFilterGUID,
                nValue: 0,
                Value: checkboxSelector.attr('value'),
                Operator: 'NULL',
                Unit: 'NULL'
            });
        }
        console.log(JSON.stringify(uncheckedFilters));
    });
}

This way you are generating an array of filter objects which you could simply convert to json using JSON.stringify like in my example above.

JSFiddle: https://jsfiddle.net/7j4g0ddb/

edited Jan 8, 2016 at 9:44

answered Jan 8, 2016 at 8:57

Gytis Tamulynas

766 bronze badges

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

1 Comment

jolmos Over a year ago

I would just add something like: $(this).addClass("registred") and check if hasClass so I don't register the same input more than once

gurvinder372 · Accepted Answer · 2016-01-08 09:16:58Z

1

try this

  $('body').on('click', 'input', function(){
    var jsonstring = '';
    jsonstring = "[";
     $( 'body' ).find( "input[type='checkbox']:checked" ).each( function(){
       jsonstring += generateJSONstringforuncheckedfilters( $( this )  ) ;
     } );
     jsonstring += "]";
     console.log(jsonstring);   
  });


function generateJSONstringforuncheckedfilters( $thisObj ) 
{
       return "{'OrderGUID': '"+ $thisObj.attr('data-orderguid') +"' 'FilterGUID': '"+ $thisObj.attr('data-filterguid') +"', 'nValue': 0, 'Value': '"+ $thisObj.attr('value') +"', 'Operator': 'NULL', 'Unit': 'NULL'}";       
}

edited Jan 8, 2016 at 9:16

answered Jan 8, 2016 at 8:47

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

3 Comments

cgee Over a year ago

That works with one input checkbox.. But I have a lot of. If I click the first checkbox and uncheck THIS checkbox again the jsonstring contains the same. That is not correct for me.

cgee Over a year ago

Now I get all checkboxes in the jsonstring with one click.

gurvinder372 Over a year ago

@cgee added the check for checked checkboxes

Doc Roms · Accepted Answer · 2016-01-08 09:51:32Z

First, for information, all element are juste one similiar Id on your HTML document (you can see W3C normes for that) it's for your HTML Code :

<input type="checkbox" checked="checked" id="check1" value="volladressierbar" />
<input type="checkbox" checked="checked" id="check1" value="teiladressierbar" />
<!--  Id of both Elements is similar -->

That is correct :

<input type="checkbox" checked="checked" id="check1" value="volladressierbar" />
<input type="checkbox" checked="checked" id="check2" value="teiladressierbar" />

Also, you can check that for the javascript code:

$('body').on('click', 'input', function(){
        var arrayJson = [];
        // get all input checked
        $( 'body' ).find( "input[type='checkbox']:checked" ).each( function(){
            var recupObject = "{'OrderGUID': '"+ $(this).attr('data-orderguid') +"' 'FilterGUID': '"+ $(this).attr('data-filterguid') +"', 'nValue': 0, 'Value': '"+ $(this).attr('value') +"', 'Operator': 'NULL', 'Unit': 'NULL'}";
            arrayJson.push(recupObject);
        });

        // create a json with all data input getted.
        if (arrayJson.length > 0){
            var jsonOutput = "[";
            for (index = 0; index < arrayJson.length; index++) {
              jsonOutput += arrayJson[index] + ",";
            }
            jsonOutput = jsonOutput.substring(0, jsonOutput.length-1); // remove last ','
            jsonOutput += "]";
        }
        console.log(jsonOutput ); // Log the Json output
    });

Collectives™ on Stack Overflow

include values in a javascript string with '+='

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related