title: How to fetch values from a JSON file on click event using ID and display the values in a form
body: <p>I'm trying to view and edit data on two separate DIV tags.
  I have implemented the click even to show the edit form on click event of the edit button in the view page.
  Now what i want is, if i click the edit button, i want to fetch the particular items Values and populate it in a form.
  i.e, checkbox values should be checked, input fields filled and radiobutton selected.
  Here is how i got so far,</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="panelList" id="panelList" hidden&gt;
  &lt;form action="#" name=""&gt;
      &lt;label class="uno"&gt;Panel Category:&lt;/label&gt; 
      &lt;span class="spec1"&gt;
      &lt;input type="checkbox" value="1" name="panel2[]"&gt;&amp;nbspRegular&amp;nbsp&amp;nbsp
      &lt;input type="checkbox" value="2" name="panel2[]"&gt;&amp;nbspReduced fee&lt;/input&gt;&amp;nbsp&amp;nbsp
      &lt;input type="checkbox" value="3" name="panel2[]"&gt;&amp;nbspLimited Assistance Referral&lt;/input&gt;&amp;nbsp&amp;nbsp
      &lt;input type="checkbox" value="4" name="panel2[]"&gt;&amp;nbspCourt Programs&lt;/input&gt;
      &lt;/span&gt;
      &lt;/br&gt;
      &lt;label class="uno"&gt;Group Panel:&lt;/label&gt;
      &lt;span class="spec2"&gt;
          &lt;input type='text' list='listid2' id='gpanel2'&gt;
          &lt;datalist id='listid2' &gt;&lt;/datalist&gt;
      &lt;/span&gt;&lt;/br&gt;
      &lt;label class="uno"&gt;Panel Title :&lt;/label&gt;
      &lt;span class="spec3"&gt;
          &lt;input type="text" name=""&gt;&lt;/br&gt;
      &lt;/span&gt;
      &lt;label class="uno"&gt;Free Panel :&lt;/label&gt;
      &lt;span class="spec4"&gt;
        &lt;input type="radio" name="free2" value="yes" checked&gt;Yes
        &lt;input type="radio" name="free2" value="no"&gt;No
      &lt;/span&gt; 
      &lt;/br&gt;
      &lt;div id="fees2"&gt;
          &lt;label class="uno"&gt;Fees $ :&lt;/label&gt;
          &lt;span class="spec5"&gt;
          &lt;input type="text" id="fees3" name="fees3" disabled="disabled" &gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
      &lt;div class="col-md-offset-3"&gt;
      &lt;input type="submit" class="btn btn-primary" value="Update" &gt;&lt;/input&gt;&amp;nbsp&amp;nbsp
      &lt;input type="reset" class="btn btn-danger" id="cancel2" value="Cancel" onclick="cancelFunction();"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="addMember" id="addMember" ng-show="panel.isSelected(2)"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> function editFunction(value)
    {
      $("#panelList").show();
      $("#addMember").hide();
      $.getJSON("active.json"),function(result)
      {
          //console.log("hi");
          var categoryArray = result;
  
          for (var i = 0; i &lt; categoryArray.length; i++) 
          {
              if (categoryArray[i].id == value) 
              {
                  return(categoryArray[i]);
  
              }
          }
      }
      return true;
  }
  
  $.getJSON("active.json", function(result) 
  {
      var panel_arr = ["", "Regular", "Reduced Fee", "Limited Assurance","Court Programs"];
      var ul_block = $("&lt;ul/&gt;");
      $.each(result, function(i, data) 
      {
          var panels = data.panel.split(",");
          var uli_block = $("&lt;ul/&gt;");
              $.each(panels, function(j, jdata)
              {
                  var ulii_block = $("&lt;ul/&gt;");
                  $(ulii_block).append($("&lt;li/&gt;").html(data.ptitle+'&amp;nbsp&amp;nbsp&lt;a href="#epanel" id='+data.id+' class="btn btn-default active" role="button" onclick="editFunction(id);"&gt;Edit&lt;/a&gt;'+'&amp;nbsp&amp;nbsp&lt;a href="#" class="btn btn-default active" role="button"&gt;Delete&lt;/a&gt;'));
  
                  $(uli_block).append($("&lt;li/&gt;").html('&lt;span class="Collapsable"&gt;'+panel_arr[panels[j]]+'&lt;/span&gt;')).append(ulii_block);
              });
          $(ul_block).append($("&lt;li/&gt;").html('&lt;span class="Collapsable"&gt;'+data.gpanel+'&lt;/span&gt;').append(uli_block));
      });
      $("#addMember").append(ul_block);
      $(".Collapsable").click(function () {
        $(this).parent().children().toggle();
        $(this).toggle();
      });
      $(".Collapsable").each(function(){
        $(this).parent().children().toggle();
        $(this).toggle();
      });
  
  
  });
  </code></pre>
  
  <p>JSON:</p>
  
  <pre><code>[  
  {  
    "id":"1",
    "gpanel":"sfd",
    "ptitle":"sdffd",
    "panel":"1,4",
    "free":"yes",
    "fees":"0.00"
   },
   {  
    "id":"2",
    "gpanel":"sdfd",
    "ptitle":"sdfds",
    "panel":"4",
    "free":"yes",
    "fees":"0.00"
   },
   {  
    "id":"3",
    "gpanel":"sdf",
    "ptitle":"sdf",
    "panel":"4",
    "free":"yes",
    "fees":"0.00"
   },
   {  
    "id":"4",
    "gpanel":"sfd",
    "ptitle":"fes",
    "panel":"1",
    "free":"yes",
    "fees":"0.00"
   },
   {  
    "id":"5",
    "gpanel":"bbbfff",
    "ptitle":"hgffg",
    "panel":"1,2",
    "free":"yes",
    "fees":"0.00"
   }
   ]
  </code></pre>