Creating an html table to display data from JSON Object

Question

I am creating a website where I call a function that will generate a html table using data from the JSON object. It's my first time trying to do it. I can't get the function to execute. I have tested whether the function starts, but it doesn't.

 var alum = { "students2015" : [ { "firstName" : "Zeynep", "lastName" : "Abalioglu", "university" : "Boston University" } + { "firstName" : "Ata", "lastName" : "Aganoglu", "university" : "University of Exeter" } + { "firstName" : "Ege", "lastName" : "Agca", "university" : "Universita Bocconi" } + { "firstName" : "Doruk", "lastName" : "Akdas", "university" : "York University" } + { "firstName" : "Batuhan", "lastName" : "Aksin", "university" : "University of Exeter" } + { "firstName" : "Omer Alp", "lastName" : "Aksu", "university" : "The University of Texas at San Antonio" } + { "firstName" : "Yosun", "lastName" : "Asal", "university" : "University of The Arts London - Central Saint Martins" } + { "firstName" : "Yasemin", "lastName" : "Avci", "university" : "Northeastern University" } + { "firstName" : "Yekta", "lastName" : "Baki", "university" : "University of Sheffield" } + { "firstName" : "Anil", "lastName" : "Bakkaloglu", "university" : "Lehigh University" } + { "firstName" : "Arda", "lastName" : "Budin", "university" : "Ryerson University" } + { "firstName" : "Berke", "lastName" : "Cavusoglu", "university" : "HZ University of Applied Science" } + { "firstName" : "Sena", "lastName" : "Cetindere", "university" : "University of Bristol" } + { "firstName" : "Dilge", "lastName" : "Dilsiz", "university" : "Lafayette College" } + { "firstName" : "Kerem", "lastName" : "Dogurga", "university" : "Emily Carr University Art and Design" } + { "firstName" : "Alp", "lastName" : "Erselcan", "university" : "Semmelweis University" } + { "firstName" : "Bora", "lastName" : "Guloglu", "university" : "University of Oxford" } + { "firstName" : "Ilayda", "lastName" : "Gunduz", "university" : "University of Toronto" } + { "firstName" : "Derin", "lastName" : "Guzel", "university" : "University of Pennsylvania" } + { "firstName" : "Rena", "lastName" : "Hazan", "university" : "Boston University" } + { "firstName" : "Joel", "lastName" : "Hemsi", "university" : "Brandeis University" } + { "firstName" : "Begum", "lastName" : "Inal", "university" : "University of California, Santa Cruz" } + { "firstName" : "Sude", "lastName" : "Karadinc", "university" : "King\'s College London" } + { "firstName" : "Murat Can", "lastName" : "Kaya", "university" : "Pennsylvania State University" } + { "firstName" : "Goksu", "lastName" : "Kayaalp", "university" : "Univresita Cattolica Del Sacro Cuore" } + { "firstName" : "Defne", "lastName" : "Kaynak", "university" : "School of The Art Institute of Chicago" } + { "firstName" : "Nursima", "lastName" : "Kazanci", "university" : "City University(F)" } + { "firstName" : "Ozan", "lastName" : "Kokuludag", "university" : "Erasmus Universiteit Rotterdam" } + { "firstName" : "Ozge", "lastName" : "Mentes", "university" : "University of Bath" } + { "firstName" : "Gokhan", "lastName" : "Mungan", "university" : "University of California, Davis" } + { "firstName" : "Kutay", "lastName" : "Nazli", "university" : "Pomona College" } + { "firstName" : "Berfin", "lastName" : "Necimoglu", "university" : "Sciences Po" } + { "firstName" : "Sarp", "lastName" : "Oktay", "university" : "University of Exeter" } + { "firstName" : "Irmak", "lastName" : "Ozbek", "university" : "Universita Cattolica Del Sacro Cuore" } + { "firstName" : "Serra", "lastName" : "Ozdemir", "university" : "Pratt Institute" } + { "firstName" : "Berk", "lastName" : "Ozture", "university" : "University of Bristol" } + { "firstName" : "Ella", "lastName" : "Polat", "university" : "Royal Holloway, University of London" } + { "firstName" : "Efe", "lastName" : "Saatci", "university" : "Northwestern University" } + { "firstName" : "Deniz", "lastName" : "Sutas", "university" : "University of Guelph" } + { "firstName" : "Mustafa", "lastName" : "Tuntas", "university" : "Universita Bocconi" } + { "firstName" : "Serra", "lastName" : "Turkun", "university" : "Parsons The School For Design" } + { "firstName" : "Elif", "lastName" : "Ulusan", "university" : "Boston University" } + { "firstName" : "Sueda", "lastName" : "Yurdadonen", "university" : "Karlsruhe Institute of Technology" }], "students2014" : [ { "firstName" : "Melis", "lastName" : "Uysal", "university" : "King's College London"} + { "firstName" : "Melisa", "lastName" : "Ozen", "university" : "Columbia University"} + { "firstName" : "Emre", "lastName" : "Pehlivan", "university" : "Goethe Institut"} + { "firstName" : "Ali", "lastName" : "Tankurt", "university" : "University of British Columbia"} + { "firstName" : "Kemal", "lastName" : "Gozegir", "university" : "Royal Holoway, University of London"} + { "firstName" : "Arda", "lastName" : "Gulyapan", "university" : "University of Surrey"} + { "firstName" : "Dogan", "lastName" : "Akad", "university" : "University of Toronto"} + { "firstName" : "Ceren", "lastName" : "Korkut", "university" : "Bocconi University"} + { "firstName" : "Ahmet Emre", "lastName" : "Harsa", "university" : "Dalhousie University"} + { "firstName" : "Melodi Var", "lastName" : "Ongel", "university" : "Bennington College"} + { "firstName" : "Basak", "lastName" : "Unligil", "university" : "University of Wisconsin, Milwakee"} + { "firstName" : "Deniz", "lastName" : "Dokuzer", "university" : "Otis College of Art and Design"} + { "firstName" : "Ada", "lastName" : "Dogrucu", "university" : "Worcester Polytechnic Institute"} + { "firstName" : "Ahmet Uzay", "lastName" : "Sezer", "university" : "Syracuse University"} + { "firstName" : "Selim", "lastName" : "Unsal", "university" : "University of Exeter"} + { "firstName" : "Alara", "lastName" : "Kaynar", "university" : "University of Toronto"} + { "firstName" : "Ayse", "lastName" : "Devecioglu", "university" : "Royal Holloway, University of London"} + { "firstName" : "Emir", "lastName" : "Vurgun", "university" : "University of Exeter"} + { "firstName" : "Ismet", "lastName" : "Genelioglu", "university" : "Royal Holloway, University of London"} + { "firstName" : "Merve", "lastName" : "Yolcu", "university" : "Bentley University"} + { "firstName" : "Zeynep", "lastName" : "Yeniceri", "university" : "Bocconi University"} + { "firstName" : "Lidya", "lastName" : "Yengul", "university" : "Brandenburg University of Technology, Cottbus"} + { "firstName" : "Timucin", "lastName" : "Oztepe", "university" : "City University"} + { "firstName" : "Alp Eren", "lastName" : "Elci", "university" : "Northeastern University"} + { "firstName" : "Ceylin", "lastName" : "Kocagoz", "university" : "Emerson College"} + { "firstName" : "Caglar", "lastName" : "Ozkul", "university" : "University of Exeter"} + { "firstName" : "Eda", "lastName" : "Seyok", "university" : "University of Edinburg"} + { "firstName" : "Ismail", "lastName" : "Tiryaki", "university" : "University of Exeter"} + { "firstName" : "Ogul Dogukan", "lastName" : "Ozen", "university" : "Politecnico di Milano"} + { "firstName" : "Emily Su", "lastName" : "Akdogan", "university" : "University College Utrecht"} + { "firstName" : "Deniz", "lastName" : "Amado", "university" : "Brandeis University"} + { "firstName" : "Selen", "lastName" : "Amado", "university" : "Brandeis University"} + { "firstName" : "Ece", "lastName" : "Ates", "university" : "Sarah Lawrence College"} + { "firstName" : "Defne", "lastName" : "Erdinc", "university" : "Barnard College"} + { "firstName" : "Yasemin", "lastName" : "Erdinc", "university" : "Barnard College"} + { "firstName" : "Esra", "lastName" : "Koraltan", "university" : "Queen Mary, University of London"} + { "firstName" : "Tuna", "lastName" : "Kunt", "university" : "University College London"} + { "firstName" : "Leyla", "lastName" : "Kursat", "university" : "Tufts University"} + { "firstName" : "Anna Maria", "lastName" : "Masautova", "university" : "University of Bristol"} + { "firstName" : "Piril", "lastName" : "Ozgercin", "university" : "Science Po-Columbia Dual Program"} + { "firstName" : "Ester", "lastName" : "Saba", "university" : "University of the Arts London"} + { "firstName" : "Sevgi", "lastName" : "Secen", "university" : "European School of Economics"} + { "firstName" : "Deniz", "lastName" : "Sokullu", "university" : "Carnegie Mellon University"} + { "firstName" : "Kayra Sila", "lastName" : "Ozalp", "university" : "Hong Kong University of Science and Technology"} ], "students2013" : [ { "firstName" : "Gunce Beren", "lastName" : "Agirbas", "university" : "Semmelweis University"} + { "firstName" : "Sandra", "lastName" : "Antebi", "university" : "Parsons School of Design"} + { "firstName" : "Ogulcan", "lastName" : "Baloglu", "university" : "University of Edinburgh"} + { "firstName" : "Emre", "lastName" : "Cubukcu", "university" : "University of Exeter"} + { "firstName" : "İpek", "lastName" : "Ertan", "university" : "McGill University"} + { "firstName" : "Elif", "lastName" : "Fotocan", "university" : "Pratt University"} + { "firstName" : "Nusret", "lastName" : "İpek", "university" : "Arizona State University"} + { "firstName" : "Mert", "lastName" : "Karakaya", "university" : "Purdue University"} + { "firstName" : "Zeynep", "lastName" : "Kaserci", "university" : "University of Saint Andrews"} + { "firstName" : "Cemrenaz", "lastName" : "Kuyumcu", "university" : "University of Bath"} + { "firstName" : "Serra Baysun", "lastName" : "Onder", "university" : "Worcester Polytechnic Institute"} + { "firstName" : "Bilgehan", "lastName" : "Saglik", "university" : "Wentworth Institute of Technology"} + { "firstName" : "Ilayda", "lastName" : "Susluer", "university" : "Michigan State University"} + { "firstName" : "Anita", "lastName" : "Savul", "university" : "Parsons School of Design"} + { "firstName" : "Doruk", "lastName" : "Tort", "university" : "University of Surrey"} + { "firstName" : "Gulce", "lastName" : "Tulcali", "university" : "Universita Bocconi"} + { "firstName" : "Cansu", "lastName" : "Ulcay", "university" : "McGill University"} + { "firstName" : "Ali Berkay", "lastName" : "Yaranolu", "university" : "University of Surrey"} + { "firstName" : "Ece", "lastName" : "Zengin", "university" : "Rhode Island School of Design"}]}; function yearCheck(year) { "use strict"; year var container = document.getElementById("table"), table = document.createElement("TABLE"), row, i, j, tData, tRow; switch (year) { case 2013: for (i = 0; i < alum.students2013.length; i += 1) { tRow = table.createElement("TR"); for (j = 0; j < 3; j += 1) { tData = table.createElement("TD"); switch (j) { case 0: tData = alum.students2013[i].firstName; tRow.appendChild(tData); table.appendChild(tRow); break; case 1: tData = alum.students2013[i].lastName; tRow.appendChild(tData); table.appendChild(tRow); break; case 2: tData = alum.students2013[i].university; tRow.appendChild(tData); table.appendChild(tRow); break; } } } container.appendChild(table); break; case 2014: break; case 2015: break; case 2016: break; default: break; } }

 <body> <div class="container" id="table"> <script>document.getElementById("table").innerHTML = yearCheck(2013);</script> </div> </body>

I have added how I called the function in the tag. I have tried to to call the function by using the attribute onload="". After testing I figured that it didn't even start the function. Is it because of the parameter in the function call? Thanks for the help in advance.

Answer 1

Check out this, ui-grid . You can easily bind your JSON data into table with multiple option.

Answer 2

Why don't you use VueJS (its v-for tag will sort your issue out) and it's easy to learn. It will save you time too since you won't need to learn alot of code just to accomplish the task. Basically this will be the only code you will have to write

<table v-for="alumni in alum">
<thead>
    <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>University</th>
    </tr>
</thead>
<tbody>
    <tr v-for="students in alumni">
        <td>{{ students.firstName }}</td>
        <td>{{ students.lastName }}</td>
        <td>{{ students.university }}</td>
    </tr>
</tbody>

Hope this helps

Answer 3

 var alum = { "students2015" : [ { "firstName" : "Zeynep", "lastName" : "Abalioglu", "university" : "Boston University" }, { "firstName" : "Ata", "lastName" : "Aganoglu", "university" : "University of Exeter" }, { "firstName" : "Ege", "lastName" : "Agca", "university" : "Universita Bocconi" } , { "firstName" : "Doruk", "lastName" : "Akdas", "university" : "York University" } , { "firstName" : "Batuhan", "lastName" : "Aksin", "university" : "University of Exeter" } , { "firstName" : "Omer Alp", "lastName" : "Aksu", "university" : "The University of Texas at San Antonio" } , { "firstName" : "Yosun", "lastName" : "Asal", "university" : "University of The Arts London - Central Saint Martins" } , { "firstName" : "Yasemin", "lastName" : "Avci", "university" : "Northeastern University" } , { "firstName" : "Yekta", "lastName" : "Baki", "university" : "University of Sheffield" } , { "firstName" : "Anil", "lastName" : "Bakkaloglu", "university" : "Lehigh University" } , { "firstName" : "Arda", "lastName" : "Budin", "university" : "Ryerson University" } , { "firstName" : "Berke", "lastName" : "Cavusoglu", "university" : "HZ University of Applied Science" } , { "firstName" : "Sena", "lastName" : "Cetindere", "university" : "University of Bristol" } , { "firstName" : "Dilge", "lastName" : "Dilsiz", "university" : "Lafayette College" } , { "firstName" : "Kerem", "lastName" : "Dogurga", "university" : "Emily Carr University Art and Design" } , { "firstName" : "Alp", "lastName" : "Erselcan", "university" : "Semmelweis University" } , { "firstName" : "Bora", "lastName" : "Guloglu", "university" : "University of Oxford" } , { "firstName" : "Ilayda", "lastName" : "Gunduz", "university" : "University of Toronto" } , { "firstName" : "Derin", "lastName" : "Guzel", "university" : "University of Pennsylvania" } , { "firstName" : "Rena", "lastName" : "Hazan", "university" : "Boston University" } , { "firstName" : "Joel", "lastName" : "Hemsi", "university" : "Brandeis University" } , { "firstName" : "Begum", "lastName" : "Inal", "university" : "University of California, Santa Cruz" } , { "firstName" : "Sude", "lastName" : "Karadinc", "university" : "King\'s College London" } , { "firstName" : "Murat Can", "lastName" : "Kaya", "university" : "Pennsylvania State University" } , { "firstName" : "Goksu", "lastName" : "Kayaalp", "university" : "Univresita Cattolica Del Sacro Cuore" } , { "firstName" : "Defne", "lastName" : "Kaynak", "university" : "School of The Art Institute of Chicago" }, { "firstName" : "Nursima", "lastName" : "Kazanci", "university" : "City University(F)" } , { "firstName" : "Ozan", "lastName" : "Kokuludag", "university" : "Erasmus Universiteit Rotterdam" } , { "firstName" : "Ozge", "lastName" : "Mentes", "university" : "University of Bath" } , { "firstName" : "Gokhan", "lastName" : "Mungan", "university" : "University of California, Davis" } , { "firstName" : "Kutay", "lastName" : "Nazli", "university" : "Pomona College" } , { "firstName" : "Berfin", "lastName" : "Necimoglu", "university" : "Sciences Po" } , { "firstName" : "Sarp", "lastName" : "Oktay", "university" : "University of Exeter" } , { "firstName" : "Irmak", "lastName" : "Ozbek", "university" : "Universita Cattolica Del Sacro Cuore" } , { "firstName" : "Serra", "lastName" : "Ozdemir", "university" : "Pratt Institute" } , { "firstName" : "Berk", "lastName" : "Ozture", "university" : "University of Bristol" } , { "firstName" : "Ella", "lastName" : "Polat", "university" : "Royal Holloway, University of London" } , { "firstName" : "Efe", "lastName" : "Saatci", "university" : "Northwestern University" } , { "firstName" : "Deniz", "lastName" : "Sutas", "university" : "University of Guelph" } , { "firstName" : "Mustafa", "lastName" : "Tuntas", "university" : "Universita Bocconi" } , { "firstName" : "Serra", "lastName" : "Turkun", "university" : "Parsons The School For Design" } , { "firstName" : "Elif", "lastName" : "Ulusan", "university" : "Boston University" } , { "firstName" : "Sueda", "lastName" : "Yurdadonen", "university" : "Karlsruhe Institute of Technology" }], "students2014" : [], "students2013" : []}; function yearCheck(year) { switch (year) { case 2015: for (i = 0; i < alum.students2015.length; i++) { var msg=''; var bean=alum.students2015[i]; msg+='<td>'+(i+1)+'</td>'; msg+='<td>'+bean.firstName+'</td>'; msg+='<td>'+bean.lastName+'</td>'; msg+='<td>'+bean.university+'</td>'; $('#alum-table').append('<tr>'+msg+'</tr>'); } break; case 2014: break; case 2013: break; case 2016: break; default: break; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="yearCheck(2015)">Click to fill with 2015 Data</button> <table id="alum-table"> <thead> <tr> <th>#</th> <th>First name</th> <th>Last name</th> <th>University</th> </tr> </thead> <tbody> </tbody> </table>

Here as you can see I have used jQuery which is just an enhanced way of writing javascript or you can say a fast and concise JavaScript Library.

Note : - If you are using exact same json as in your question then replace every plus("+") in between two json objects in an json array with ",".

And If you Still want to go with old method then change you code as below but for that you need to follow the note written before.

 var alum = { "students2015" : [], "students2014" : [], "students2013" : [ { "firstName" : "Gunce Beren", "lastName" : "Agirbas", "university" : "Semmelweis University"} , { "firstName" : "Sandra", "lastName" : "Antebi", "university" : "Parsons School of Design"} , { "firstName" : "Ogulcan", "lastName" : "Baloglu", "university" : "University of Edinburgh"} , { "firstName" : "Emre", "lastName" : "Cubukcu", "university" : "University of Exeter"} , { "firstName" : "İpek", "lastName" : "Ertan", "university" : "McGill University"} , { "firstName" : "Elif", "lastName" : "Fotocan", "university" : "Pratt University"} , { "firstName" : "Nusret", "lastName" : "İpek", "university" : "Arizona State University"} , { "firstName" : "Mert", "lastName" : "Karakaya", "university" : "Purdue University"} , { "firstName" : "Zeynep", "lastName" : "Kaserci", "university" : "University of Saint Andrews"} , { "firstName" : "Cemrenaz", "lastName" : "Kuyumcu", "university" : "University of Bath"} , { "firstName" : "Serra Baysun", "lastName" : "Onder", "university" : "Worcester Polytechnic Institute"} , { "firstName" : "Bilgehan", "lastName" : "Saglik", "university" : "Wentworth Institute of Technology"} , { "firstName" : "Ilayda", "lastName" : "Susluer", "university" : "Michigan State University"} , { "firstName" : "Anita", "lastName" : "Savul", "university" : "Parsons School of Design"} , { "firstName" : "Doruk", "lastName" : "Tort", "university" : "University of Surrey"} , { "firstName" : "Gulce", "lastName" : "Tulcali", "university" : "Universita Bocconi"} , { "firstName" : "Cansu", "lastName" : "Ulcay", "university" : "McGill University"} , { "firstName" : "Ali Berkay", "lastName" : "Yaranolu", "university" : "University of Surrey"} , { "firstName" : "Ece", "lastName" : "Zengin", "university" : "Rhode Island School of Design"}]}; function yearCheck(year) { var container = document.getElementById("table"), table = document.createElement("TABLE"), row, i, j, tData, tRow; switch (year) { case 2013: for (i = 0; i < alum.students2013.length; i++) { tRow = document.createElement("TR"); for (j = 0; j < 3; j += 1) { tData = document.createElement("TD"); switch (j) { case 0: tData.innerHTML = alum.students2013[i].firstName; tRow.appendChild(tData); break; case 1: tData.innerHTML = alum.students2013[i].lastName; tRow.appendChild(tData); break; case 2: tData.innerHTML = alum.students2013[i].university; tRow.appendChild(tData); break; } } table.appendChild(tRow); } container.appendChild(table); break; case 2014: break; case 2015: break; case 2016: break; default: break; } } yearCheck(2013);

 <body> <div class="container" id="table"> </div> </body>

Using plus will make your element detect as undefined.... If you want to try then put plus in single place and see the difference.

In your method the way you are appending value to the element is a bit wrong as you are changing the type of element (At least that's what i guess as you first define it as an html element and then change it to just text and then try to append that text as an element. Which is in a way wrong.).

And table.appendChild(tRow); is not required to append in every case. I didn't have tried it but if you go with it it will surely not generate the code that you are expecting