CODEWITHSUNDEEP
javascriptjsonapisorting
user11524415
user11524415

Reputation:

Sorting on click API data from url

I want to sort parameters: id, salary and age at the click of a button. Suppose I have to dynamically clean my table (deleteRow), sort and then display the data again. However, seems to be difficult. Can somebody help me? Is there a better way?

JavaScript:

const butt = document.getElementById('button');
const swTable = document.getElementById('table').getElementsByTagName('tbody')[0];
const url = 'http://dummy.restapiexample.com/api/v1/employees';

function fetchFromUrl(url) {
  return fetch(url).then(function(resp) {
    return resp.json()
  });
}

function createElement(nameOfTag, text) {
  const element = document.createElement(nameOfTag);
  const content = document.createTextNode(text);
  element.appendChild(content);
  return element;
}

function createTable(data) {
  const table = document.createElement('tr');
  const {
    id,
    employee_name,
    employee_salary,
    employee_age
  } = data;

  table.appendChild(createElement('td', id))
  table.appendChild(createElement('td', employee_name))
  table.appendChild(createElement('td', employee_salary))
  table.appendChild(createElement('td', employee_age))
  return table;
}

fetchFromUrl('http://dummy.restapiexample.com/api/v1/employees')
  .then(data => {
    data.forEach(result => {
      const row = createTable(result);
      swTable.appendChild(row);
    })
  });
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS</title>

  <body>
    <table id=table>
      <thead>
        <th><button id=id> id </button> </th>
        <th><button id=name> employee name </button> </th>
        <th><button id=salary> employee salary </button> </th>
        <th><button id=age>  employee age </button> </th>
        </tr>
      </thead>
      <tbody>

      </tbody>

    </table>

    <script type="module" src='main.js' type="text/javascript">
    </script>
  </body>

</html>

Upvotes: 0

Views: 1090

Answers (1)

lzagkaretos
lzagkaretos

Reputation: 2910

Using plain JavaScript, you can use a function for sorting the data array and then replace old tbody with the new one.

For example:

function sortByField(field) {
  if (field == 'id') {
    data.sort((a,b) => (Number(a.id) > Number(b.id)) ? 1 : ((Number(b.id) > Number(a.id)) ? -1 : 0)); 
  } else if (field == 'name') {
    data.sort((a,b) => (a.employee_name > b.employee_name) ? 1 : ((b.employee_name > a.employee_name) ? -1 : 0)); 
  } else if (field == 'salary') {
    data.sort((a,b) => (Number(a.employee_salary) > Number(b.employee_salary)) ? 1 : ((Number(b.employee_salary) > Number(a.employee_salary)) ? -1 : 0)); 
  } else if (field == 'age') {
    data.sort((a,b) => (Number(a.employee_age) > Number(b.employee_age)) ? 1 : ((Number(b.employee_age) > Number(a.employee_age)) ? -1 : 0)); 
  }

  var old_tbody = document.getElementById('tbody');
  var new_tbody = document.createElement('tbody');
  new_tbody.setAttribute('id', 'tbody');
  data.forEach(result => {
    const row = createTable(result);
    new_tbody.appendChild(row);
  });
  old_tbody.parentNode.replaceChild(new_tbody, old_tbody);
}

And add onclick event handlers on buttons:

onclick="sortByField('id')"

Here you can find a working example.

Note that I used Number to convert strings to numbers while sorting.

Of course, you can use Underscore library to perform the sorting, JQuery library to select html elements etc.

And take a look here on different ways you can sort an array of objects.

Upvotes: 6

Related Questions