Question 237096 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – I have an empty string of multiple keys that I convert into html and print out on the screen, how do I add a checkbox for each key?

I have a JavaScript function that creates an empty string, grabs key values, converts them to their html form which is what I want to print and adds break lines. I want each line to have its own check box where I have $("#checkboxConsent). It just prints out object object, its html form. Is there a better way to do this?

var consentString = "";//creating empty string for consents
    for(var grabbingKeyLines in data.consentText.consentLines)
        consentString += '<br>' + $('#checkBoxConsent') + (data.consentText.consentLines[grabbingKeyLines] + '<br>') 
         }
                    
    $('#stateConsentLines').html(consentString);//show string
Tags:

2

Answers


  1. 0

    try to use $("#checkBoxConsent").clone().attr('id', '').outerHTML() instead of $("#checkBoxConsent") :

    var consentString = "";//creating empty string for consents
for(var grabbingKeyLines in data.consentText.consentLines)
    consentString += '<br>' + $("#checkBoxConsent").clone().attr('id', '').outerHTML() + (data.consentText.consentLines[grabbingKeyLines] + '<br>') 
     }
                
$('#stateConsentLines').html(consentString);//show string

    $("#checkBoxConsent").clone().attr('id', '').outerHTML() this clones the example checkbox to a new element and remove its id so it wont be duplicated than getthe html text of the element by outerHTML().

    Login or Signup to reply.
  2. 0

    What you are showing for your JSON ([0: "some text", 1 : "more text"]) is not valid JSON.

    • [] denotes an array and arrays have numeric indices, not keys.
    • {} denotes an object and objects have string keys.

    One simple way to know that you have valid JSON is to create the JSON yourself using JSON.stringify() as in this example:

    // Keep in mind that console.log() outputs a string, so while the 
// console won't show it, you must realize that the output you see
// would have single quotes around the whole output.

// Example of JSON from an array. Produces: '["some text","more text"]'
console.log(JSON.stringify(["some text", "more text"]));

// Example of JSON from an object. Produces: '{"key1":"some text","key2":"more text"}'
console.log(JSON.stringify({key1: "some text", key2: "more text"}));

    Given what you are showing in your string, it seems like you need an array, rather than an object (you are showing numeric indices that go with the data).

    Next, even if your string was valid JSON, you’d need to pass it into JSON.parse() in order to turn it back into a JavaScript array or object before you can work with it as such.

    // Parsing a JSON string into a JS array:
console.log(JSON.parse('["some text", "more text"]'));
/* Produces: 
[
  "some text",
  "more text"
]
*/

// Parsing a JSON string into a JS object:
console.log(JSON.parse('{"key1":"some text","key2":"more text"}'));
/* Produces: 
{
  "key1": "some text",
  "key2": "more text"
}
*/

    Now all of that is just to get you to a point where you have either an array or an object that you can work with in JavaScript. To your specific question, you then need to iterate through that array or object to access the individual elements that it contains.

    // Parsing a JSON string into a JS array:
let ary = JSON.parse('["some array text", "more array text"]');

// Parsing a JSON string into a JS object:
let obj = JSON.parse('{"key1":"some object text","key2":"more object text"}');

// Loop over the array and create output with a checkbox before each item
let output1 = ""; // Will hold resulting HTML
ary.forEach(function(item){
  output1 += "<input type='checkbox'>" + item + "<br>";
});
document.querySelector("#out1").innerHTML = output1;

// Loop over the object and create output with a checkbox before each item
let output2 = ""; // Will hold resulting HTML
for(var item in obj){
  output2 += "<input type='checkbox'>" + obj[item] + "<br>";
};
document.querySelector("#out2").innerHTML = output2;
    <div id="out1"></div>

<div id="out2"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search