Edit in JSFiddle

var d = document.getElementById('lista');
var student = [{
  imie: "Ola",
  nazwisko: "Kowal",
  kierunek: "fizyka"
}, {
  imie: "Ela",
  nazwisko: "Nowak",
  kierunek: "fizyka"
}, {
  imie: "Ala",
  nazwisko: "Góral",
  kierunek: "chemia"
}, {
  imie: "Ula",
  nazwisko: "Szpak",
  kierunek: "chemia"
}, {
  imie: "Marian",
  nazwisko: "Cyber",
  kierunek: "fizyka"
}];

function pokaz(kierunek) {
	//clear
  d.innerHTML = "";
  
  //set title
  var para = document.createElement("h2");
	var node = document.createTextNode(kierunek);
	para.appendChild(node);
	d.appendChild(para);
  
  //filter
  var chosen = student.filter(function(el) {
    return el.kierunek == kierunek;
  });
  
	//display
  for (var prop in chosen) {
    d.insertAdjacentHTML('beforeend', '<div class="student">' + chosen[prop].imie + ' ' + chosen[prop].nazwisko + '</div>');
  }

}

<button onclick="pokaz('fizyka')">Fizyka</button>
<button onclick="pokaz('chemia')">Chemia</button>

<div id="lista">
  <div>

body {
  font-family: 'Open Sans', sans-serif;
}
#lista {
  margin: 20px 0;
  background: #eee;
}
#lista h2 {
  color: red;
  padding: 20px;
  border-bottom:1px solid red;
  margin: 0;
}
#lista .student{
  padding: 20px;
}
#lista .student:nth-child(odd) {
  background: #ccc;
}
#lista .student:first-child {
  padding: 0 20px 20px 20px;
}