You can update a JavaScript string by adding values using the '+=' operator

Question

You can update a JavaScript string by adding values using the '+=' operator

I have the 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: []
}

The current output is this = [ ]

However, my desired output is:

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

If I click again into a checkbox field, the jsonstring should 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 the issue I am facing.

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

javascript json

Answer 1

Answer №1

Consider attempting the following approach:

let uncheckedFilters = [];

function createJSONStringForUncheckedFilters(){
    $('body').on('click', 'input', function() {
        let checkboxSelector = $(this);
        let checkboxFilterGUID = checkboxSelector.attr('data-filterguid');
        if(checkboxSelector.is(':checked')) {
            uncheckedFilters.forEach(function(filter) {
                if(filter.FilterGUID === checkboxFilterGUID) {
                    let 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 method will help you build an array of filter objects that can be easily converted to JSON by using JSON.stringify as demonstrated in the sample provided above.

JSFiddle: https://jsfiddle.net/9k2gnfxw/

Answer 2

Consider attempting the following approach:

let uncheckedFilters = [];

function createJSONStringForUncheckedFilters(){
    $('body').on('click', 'input', function() {
        let checkboxSelector = $(this);
        let checkboxFilterGUID = checkboxSelector.attr('data-filterguid');
        if(checkboxSelector.is(':checked')) {
            uncheckedFilters.forEach(function(filter) {
                if(filter.FilterGUID === checkboxFilterGUID) {
                    let 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 method will help you build an array of filter objects that can be easily converted to JSON by using JSON.stringify as demonstrated in the sample provided above.

JSFiddle: https://jsfiddle.net/9k2gnfxw/

Answer 3

Answer №2

give this a shot

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


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

Answer 4

give this a shot

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


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

Answer 5

Answer №3

Initially, it's important to note that all elements have a unique ID in your HTML document (refer to the W3C standards for more information). Here is an example from your HTML code:

<input type="checkbox" checked="checked" id="check1" value="volladressierbar" />
<input type="checkbox" checked="checked" id="check1" value="teiladressierbar" />
<!-- Both elements have similar IDs -->

To resolve this issue:

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

Furthermore, ensure the uniqueness of IDs in your JavaScript code as well:

$('body').on('click', 'input', function(){
        var arrayJson = [];
        // Retrieve all checked inputs
        $( '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 object with the input data.
        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
    });

Answer 6

Initially, it's important to note that all elements have a unique ID in your HTML document (refer to the W3C standards for more information). Here is an example from your HTML code:

<input type="checkbox" checked="checked" id="check1" value="volladressierbar" />
<input type="checkbox" checked="checked" id="check1" value="teiladressierbar" />
<!-- Both elements have similar IDs -->

To resolve this issue:

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

Furthermore, ensure the uniqueness of IDs in your JavaScript code as well:

$('body').on('click', 'input', function(){
        var arrayJson = [];
        // Retrieve all checked inputs
        $( '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 object with the input data.
        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
    });

You can update a JavaScript string by adding values using the '+=' operator

Answer №1

Answer №2

Answer №3

Similar questions

Issue with CoffeeScript and three.js: scene not defined

Locate a specific data point within an array of JSON objects

Developing a jQuery Plugin to Generate an Interactive Dropdown Menu

Tips for sending a changing mouse scroll value as a property in VueJS

Exploring the power of Next.js dynamic routes connected to a Firestore collection

Does AngularJS have a feature similar to jQuery.active?

I am in search of a regular expression to validate a Jordanian phone number, whether it includes the country code or not

Forcing the Empty Table message in jQuery DataTables post an AJAX request

When using Angular 2, the array.splice() function is causing the elements to be removed from the

Display or conceal fields depending on custom object specifications

Vue component architecture

What is the best way to select the enclosed <a> tag within an <li> element?

Tips for transforming the input date value from Mui Datepicker

Is it possible for node-java to accept anonymous functions as parameters in Java?

Evaluating string combinations in JavaScript using valid comparisons

Struggling to display Three.js ply file on screen

Invoking two asynchronous functions in React, where the first function relies on the state modified by the second function

Utilize Nifi's Execute Script Processor with Groovy to perform automated data transformation

Transforming a JSON file that has been previously converted to an Observable into a TypeScript map within an Angular application

How to eliminate the comma from the final element in a JavaScript Vue.js array?