Populate Html Table Based On Second Dropdown Selection

I have an HTML table with one dropdown and am trying to add another. I simply just want all the same data in the table no matter which choice is chosen but am not sure what else to

Solution 1:

You were pretty close in your attempt. I think you over complicated getting the ID out of the html and accessing the JSON object.

Below I only made changes to myFunction() which grabs the osd property from each rows id attribute and the acat property name from the second selects value. To get the final data I access the orgs object like so orgs.osd[objKey][acatKey]; and create a element to append to the row, only after clearing any previous data.

var orgs = {
  osd: {
    acat_i: {
      authority: "unknown",
      governance: "unknown",
      management: "unknown",
      use_cases: "unknown",
      community: "unknown",
      definitions: "unknown",
      periodicity: "unknown",
      start_end: "unknown",
      it_system: "gems",
      data_quality: "unknown",
      tailoring: "unknown",
      data_access: "unknown",
      handling: "unknown",
      data_lifecycle: "unknown",
      historical: "unknown",
      integration: "unknown",
      review: "unknown"
    },
    acat_ii: {
      authority: "unknown",
      governance: "unknown",
      management: "unknown",
      use_cases: "unknown",
      community: "unknown",
      definitions: "unknown",
      periodicity: "unknown",
      start_end: "unknown",
      it_system: "unknown",
      data_quality: "unknown",
      tailoring: "unknown",
      data_access: "unknown",
      handling: "unknown",
      data_lifecycle: "unknown",
      historical: "unknown",
      integration: "unknown",
      review: "unknown"
    }
  }
}

functionmyFunction() {
  $("#data_values tr:not(:first)").each(function() {
    var objKey = $(this).attr("id");
    var acatKey = $('#data_options').val().toLowerCase();
    if (typeof orgs.osd[objKey] === "undefined") {
      console.log("no prop exists with " + objKey);
      return;
    }
    //clear any previous td data
    $(this).find("td:gt(0)").remove();
    var data = orgs.osd[objKey][acatKey];
    $(this).append("<td>" + data + "</td>");
  })
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-----first drop down----><selectid="test_drop"><optionvalue="selection1">selection1</option><optionvalue="selection2">selection2</option><optionvalue="selection3">selection3</option></select><!-----second drop down----><selectid="data_options"onchange="myFunction()"><optionvalue="authority">Authority</option><optionvalue="governance">Governance</option><optionvalue="Management">Management</option><optionvalue="use_cases">Use Cases</option><optionvalue="community">User Community</option><optionvalue="Definitions">Definitions</option><optionvalue="Periodicity">Periodicity</option><optionvalue="Start/End Criteria">Start/End Criteria</option><optionvalue="it_system">IT System/Database</option><optionvalue="Data Quality">Data Quality</option><optionvalue="Tailoring">Tailoring</option><optionvalue="Data Access">Data Access</option><optionvalue="Handling and Security">Handling and Security</option><optionvalue="Data Lifecycle">Data Lifecycle</option><optionvalue="Historical Archives">Historical Archives</option><optionvalue="Integration">Integration</option><optionvalue="Review/Approval">Review/Approval</option></select><tableid="data_values"><thead><TH></TH><THid="osd">OSD</TH><THid="army">Army</TH><THid="navy">Navy</TH><THid="af">Air Force</TH></thead><TRid="acat_i"><TD>ACAT I</TD></TR><TRid="acat_ii"><TD>ACAT II-IV</TD></TR><TRid="acat_iii"><TD>ACAT III-IV</TD></TR><TRid="bds"><TD>BDS</TD></TR></TABLE>