filling table according to select tag options

Question

Javascript beginner here, trying to learn by doing, my question is, here i have a table which is filled with information already and below it is select tag which is fetched from url. My question is i want to fill the table again but with the information of select tag ( depending on which option user choose from select tag, table gets filled with that information). here is select tags data

[
    {
        "id": "1111",
        "mygoals": "getmarried",
        "future": "married",

    },
    {
        "id": "2222",
        "mygoals": "getmarried",
        "future": "married",

    },
    {
        "id": "33333",
        "mygoals": "getmarried",
        "future": "married",

    }
]

Here is my code :




    
    
 
  
    
 







 
   
    
      id
      mygoals
      future
    
  
   
  

  
    
      id
      mygoals
      future

user_1762224 · Answer

If you need to populate a table with data, once you get the JSON from your XHR fetch, you can just iterate over the data and build table rows.

I am not sure what you mean, by populating the table by the select options. If need be, please provide a full use-case, but I interpret is as you want to fill the table based on the selection.

See the example below.

const tableEl = document.querySelector('.table');
const selectEl = document.querySelector('#select');

// Only show the record that matched the selection.
selectEl.addEventListener('change', e => {
  // Or make a call to a different JSON endpoint...
  populateTableWithJSON(tableEl, getJsonData().filter(record => {
    return record.id === e.target.value;
  }));
});

populateTableWithJSON(tableEl, getJsonData());
populateSelectWithJSON(selectEl, getJsonData(), {
  idFn : r => r.id,
  displayFn : r => `${r.id} ${r.mygoals}`
});

function populateSelectWithJSON(select, jsonData, opts={}) {
  emptyElement(select);
  jsonData.forEach((record, index) => {
    let id = opts.idFn != null ? opts.idFn(record) : record.id || index;
    let text = opts.displayFn != null ? opts.displayFn(record) : record.text || '';
    select.appendChild(new Option(text, id));
  });
}

function populateTableWithJSON(table, jsonData) {
  let tbody = table.querySelector('tbody');
  emptyElement(tbody);
  if (jsonData != null && jsonData.length > 0) {
    let headers = table.querySelectorAll('thead > tr th');
    let fields = headers.length
      ? Array.from(headers).map(th => th.textContent)
      : Object.keys(jsonData[0]);
    jsonData.forEach(record => {
      let tr = document.createElement('TR');
      fields.forEach(field => {
        let td = document.createElement('TD');
        td.textContent = record[field];
        tr.appendChild(td);
      });
      tbody.appendChild(tr);
    });
  }
}

function emptyElement(element) {
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
}

function getJsonData() {
  return [{
    "id": "1111",
    "mygoals": "getmarried",
    "future": "married",
  }, {
    "id": "2222",
    "mygoals": "getmarried",
    "future": "married",
  }, {
    "id": "33333",
    "mygoals": "getmarried",
    "future": "married",
  }];
}





  
    
      
        id
        mygoals
        future

filling table according to select tag options

1 Answers