Based on select field generate a table from json file

Question

Is it possible to auto create a table from json files based on selected values.

$(document).ready(function(){
     $("#dropdown_change").change(function(){
      alert("Selected value is : " + document.getElementById("dropdown_change").value);
});

I was striked how to proceed further.Could you pls help me.. — Anus G, Aug 05 '16 at 10:24
@AnushaGonugunta can you show me what kind of json object you have? — uzaif, Aug 05 '16 at 10:25
i have a json file: var PROJECTDETAILS = [ { "Project key":"Bluesky", "Employee Name":"anusha", "Issue Id":"0011", "Charge No":"1111", "Hours":"10" }, { "Project key":"Bluesky", "Employee Name":"anusha", "Issue Id":"00123", "Charge No":"1111", "Hours":"10" }, { "Project key":"project2", "Employee Name":"kavya", "Issue Id":"00452", "Charge No":"1111", "Hours":"10" } ] — Anus G, Aug 05 '16 at 10:26
I had a table with project name ,employeename,charge.with some down list.When i select the employeename as ----,then auto poulate of table with associated details from json file.Project name,employ,chargeno — Anus G, Aug 05 '16 at 10:31
follow this link http://stackoverflow.com/questions/17066636/parsing-json-objects-for-html-table#answer-17066815 — uzaif, Aug 05 '16 at 10:44

score 0 · Accepted Answer · answered Aug 05 '16 at 10:49

0

With your given json i'hv made an example. Look into this.

$("#dropdown_change").change(function() {
  var val = $(this).val();
  alert("Selected value is : " + val);
  var projects = PROJECTDETAILS.filter(function(pd) {
    return pd['Project key'] == val;
  })
  if (projects.length) {
    var html = '';
    projects.map(function(pro) {
      html += '<tr>';
      for (var i in pro) {
        html += '<td>' + pro[i] + '</td>';
      }
      html += '</tr>';
    })
    $('table').find('tr').not(':eq(0)').remove();
    $('table').show().append(html);
  }
});

var PROJECTDETAILS = [{
  "Project key": "Bluesky",
  "Employee Name": "anusha",
  "Issue Id": "0011",
  "Charge No": "1111",
  "Hours": "10"
}, {
  "Project key": "Bluesky",
  "Employee Name": "anusha",
  "Issue Id": "00123",
  "Charge No": "1111",
  "Hours": "10"
}, {
  "Project key": "project2",
  "Employee Name": "kavya",
  "Issue Id": "00452",
  "Charge No": "1111",
  "Hours": "10"
}]

$(document).ready(function() {
  $("#dropdown_change").change(function() {
    var val = $(this).val();
    alert("Selected value is : " + val);
    var projects = PROJECTDETAILS.filter(function(pd) {
      return pd['Project key'] == val;
    })
    if(projects.length){
      var html = '';
      projects.map(function(pro){
        html+='<tr>';
        for(var i in pro){
          html+='<td>'+pro[i]+'</td>';
        }
        html+='</tr>';
      })
      $('table').find('tr').not(':eq(0)').remove();
      $('table').show().append(html);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown_change">
  <option value="Bluesky">Bluesky</option>
  <option value="project2">project2</option>
</select>

<table style="display: none">
  <tr><th>Project key</th><th>Employee Name</th><th>Issue Id</th><th>Charge No</th><th>Hours</th></tr>
  </table>

answered Aug 05 '16 at 10:49

Parvez Rahaman

4,269
3
22
39

@AnushaGonugunta glad it helps – Parvez Rahaman Aug 05 '16 at 12:37
One more help is My table contains header as Project Charge#Field Employee Name On select of employee name two tables should populate:TABLE 1: Project name || Employee||ChargeNo – Anus G Aug 05 '16 at 12:39
Then change the table as you wish. And no need to use `for(var i in pro){ html+=''+pro[i]+''; }` rather use `html+=''+pro['Employee Name']+'';` – Parvez Rahaman Aug 05 '16 at 12:44
One more help is My table contains header as Project Charge#Field Employee Name On select of employee name two tables should populate:TABLE 1: Project name || Employee||ChargeNo AND Table 2: project name||Employee||issueid||hours – Anus G Aug 05 '16 at 12:45
Add both table. `var html = '';` `var html1 = '';` add `` and `` as i suggested in previous comment and then `$('#table1').show().append(html)` `$('#table2').show().append(html1)` using table id. – Parvez Rahaman Aug 05 '16 at 12:50
The details are appending to html. need to create a new html with header and rows. – Anus G Aug 05 '16 at 13:23
If at a time if a select two project names and multiple employee names.how to proceed on it. – Anus G Aug 05 '16 at 18:01
@AnushaGonugunta please another question for it or update the existing one. – Parvez Rahaman Aug 05 '16 at 18:38
For same code I need to populate when I select two select list from dropdown.IN html I had changed – Anus G Aug 07 '16 at 09:34

Based on select field generate a table from json file

1 Answers1