Making table with objects in array?

Question

I'm a beginner in javascript and I have a little problem with my code. I found an exercise and i'm trying to do it. I have to write a function that will insert text from variable into table. I never met something like this. This variable looks like four objects in array. I want to show text in the table when I press a button. There are two buttons. When I press "Fizyka" button i should see:

Fizyka
Ola Kowal
Ela Nowak

and when I press "Chemia":

Chemia
Ala Goral
Ula Szpak

So this is my code. All i can edit is function show(study):

<!DOCTYPE html>
<html lang="pl">
 <head>

    <meta charset="utf-8">

 </head>
<body>

<button onclick="show('fizyka')">Fizyka</button>
<button onclick="show('chemia')">Chemia</button>
<div id="list"></div>

    <script>

        var student=[
            {name:"Ola", second_name:"Kowal", study:"fizyka"},
            {name:"Ela", second_name:"Nowak", study:"fizyka"},
            {name:"Ala", second_name:"Goral", study:"chemia"},
            {name:"Ula", second_name:"Szpak", study:"chemia"},
                    ];  

        function show(study)
        {
            if (study==='fizyka')
            {
            document.getElementById("list").innerHTML = "<h2>student.kierunek</h2><ul><li>student.name + " " + student.second_name</li><li>student.name + " " + student.second_name</li></ul>";

            }

            if (study==='chemia')
            {
            document.getElementById("list").innerHTML = "<h2>student.kierunek</h2><ul><li>student.name + " " + student.second_name</li><li>student.name + " " + student.second_name</li></ul>";
            }
        }

    </script>

</body>
</html>

It's not working. I don't know how to insert text from this variable into table.

Kingmaker · Accepted Answer · 2016-01-03 20:40:20Z

1

There is several problem with your code. I have written piece of code which is working and you can use it and inspire.

<button onclick="show('fizyka')">Fizyka</button> 
<button onclick="show('chemia')">Chemia</button>
<div id="list"><h2></h2><ul></ul></div>


<script>
    //Student array
    var student=[
        {name:"Ola", second_name:"Kowal", study:"fizyka"},
        {name:"Ela", second_name:"Nowak", study:"fizyka"},
        {name:"Ala", second_name:"Goral", study:"chemia"},
        {name:"Ula", second_name:"Szpak", study:"chemia"},
                ];  

    function show(study)
    {
      console.log('ENTER show('+study+')');
      //Select h2 element 
      var header = document.getElementById("list").firstChild;
      //Set h2 element text
      header.innerHTML = study;

      //Select ul element
      var list = document.getElementById("list").lastChild;
      //Set inner html to empty string to clear the content
      list.innerHTML = "";
      //loop through students and set the appropriate html element values
      for(var i = 0; i < student.length; i++){
        //check whether student[i] studies study which is put as a paramter into the function
        if(student[i].study === study){
          //Create new li element
          var li = document.createElement('li');
          //Into li element add a new text node which contains all data about the student
          li.appendChild(document.createTextNode(student[i].name + ' ' + student[i].second_name));
          //add li element into ul
          list.appendChild(li); 
        }
      }
      console.log('LEAVE show('+study+')');

    }

</script>

edited Jan 3, 2016 at 20:40

answered Jan 3, 2016 at 20:00

Kingmaker

5191 gold badge6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

upgrade11 Over a year ago

Is there easier way to do this? I'm a beginner and I don't understand this code.

Kingmaker Over a year ago

Which part do you not understand? I can better comment my code if you want. If you want to show student names dynamically then I think it is one of the easiest way to do it.

Kingmaker Over a year ago

I added comments into the code. So maybe it is more clear now. ;)

Collectives™ on Stack Overflow

Making table with objects in array?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related