1

I am using below code get json response -

   <!DOCTYPE html>
<html>
<body>
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

<label><input type="checkbox" name="test_name" value=""></label>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var jsonstr = JSON.stringify(this.responseText,undefined, 2).replace(/\\n/g, "").replace(/\\r/g, "")
                                                                                      .replace(/\\/g, "")
                                                                                      .replace(/^"/, "")
                                                                                      .replace(/"$/, "");
    var jsonobj =  JSON.parse(jsonstr);

    for ( var i=0;i<jsonobj.length; i++) 
    {
         console.log(jsonobj[i].Test_Name);
             var label = document.getElementsByName('test_name')[0]; 
             label.value= jsonobj[i].Test_Name;               
    }; 

    }
  };
  xhttp.open("GET", "https://testendpoint/", true);
  xhttp.send();

}

</script>

</body>
</html>

I am getting response as below -

[{
"Test_Name": "FOOD",
"Code": "PE"
},
{
"Test_Name": "FOOD_TRAVEL",
"Code": "PE"
}]

I need to pass the Test_Name into the below tag -

<label><input type="checkbox" name="test_name" value=""></label>

How to loop all the Test_Name and display.

2

Here is what you are looking for :

var jsonstr = '[{ "Test_Name": "FOOD",  "Code": "PE" }, { "Test_Name": "FOOD_TRAVEL", "Code": "PE" }]';

var jsonobj =  JSON.parse(jsonstr);
for ( var i=0;i<jsonobj.length; i++) 
    {
         console.log(jsonobj[i].Test_Name);

    };

This gives the following output:

FOOD FOOD_TRAVEL

Modified : So now I can see your element within the label as Checkbox. A checkbox can have a Boolean value to check/uncheck the Checkbox. You need to use the right element to assign a value like a Label, TextBox etc

for ( var i=0;i<jsonobj.length; i++) 
    {
         console.log(jsonobj[i].Test_Name);
             var label = document.getElementsByName('test_name')[0]; 
             label.value= jsonobj[i].Test_Name;               
    }; 

Here is how you will assign the value :

So if you want to generate checkboxes dynamically. Here is the code. Modify you element to have a wrapper div.

<div id="wrapperfortestnames"></div>
var gencheckboxes = "";
for ( var i=0;i<jsonobj.length; i++) 
        {
             console.log(jsonobj[i].Test_Name);
                 gencheckboxes = gencheckboxes + '<input type="checkbox" name="test_name" value="'+ jsonobj[i].Test_Name; +'">' + jsonobj[i].Test_Name + '<br></input>';
        }; 
var dwrap = document.getElementById('wrapperfortestnames');
dwrap.innerHTML=gencheckboxes;  

Cheers

  • That i am getting in the response. But i need to assign those values into <label><input type="checkbox" name="test_name" value=""></label> and display it. There will be a lot of Test_Name. – hellraizer Dec 24 '16 at 10:01
  • I have updated my modified code above. I am unable to display the values..I am getting the values in console log. Can u check. – hellraizer Dec 24 '16 at 10:41
  • var label = document.getElementsByName('test_name')[0]; is giving only the first test_name. How to display all the name.. – hellraizer Dec 24 '16 at 11:06
  • Still i am unable to see checkboxes in the UI on button click. I am seeing the inputcheckbox in console log not in UI.. Is it not rendering on button click. – hellraizer Dec 24 '16 at 13:54
  • Please paste your current code .Will review and fix – clairvoyant Dec 24 '16 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.