Fetch JSON data from server to table

Question

I would like to fetch JSON data from this server: http://eso.vse.cz/~xvojs03/studenti.json to a table, but I do not know how to read Keys and Values and even the Array together to fetch them to the table.

This might be really stupid question but I am beginner in jQuery.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>getJSON - tabulka studentů</title>
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
      $(document).ready(function() {
        $.getJSON("http://eso.vse.cz/~xvojs03/studenti.json")
          .done(function(data) {
            $.each(data, function(key, val) {
              $.each(data.predmety, function() {
                $("tr").append("<td>"
                  key + ": " + val + "</td><td>" + predmety.join(",") + " ")
              });
            });
          });
      });
    </script>
  </head>
  <body>
    <div class="container">
      <h2>Následující JSON jsme získali Ajaxem ze serveru</h2>
      <table>
        <tr>
          <th>Jméno</th>
          <th>Příjmení</th>
          <th>Stupeň</th>
          <th>Semestr</th>
          <th>Predměty</th>
        </tr>
        <tr></tr>
      </table>
    </div>
  </body>
</html>

Juyal Ahmed · Accepted Answer · 2016-12-04 18:28:56Z

1

You can try this code with giving a id for the table and putting this js snippet:

$.each(data, function(key, val) {
  $("#result-set").append("<tr><td>"+val.jmeno+"</td><td>"+val.prijmeni+"</td><td>"+val.stupen+"</td><td>"+val.semestr+"</td><td>"+val.predmety.join(",")+"</td></tr>");
});

Full page code would be:

<!DOCTYPE html>
<html>
<head>  
<meta charset="utf-8" />    
<title>getJSON - tabulka studentů</title> 

<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

<script>        
$(document).ready(function(){
  $.getJSON( "http://eso.vse.cz/~xvojs03/studenti.json" )
    .done(function(data){ 

    $.each(data, function(key, val) {
      $("#result-set").append("<tr><td>"+val.jmeno+"</td><td>"+val.prijmeni+"</td><td>"+val.stupen+"</td><td>"+val.semestr+"</td><td>"+val.predmety.join(",")+"</td></tr>");
    });

  });
});
</script>    

</head>
<body>
  <div class="container">        
    <h2>Následující JSON jsme získali Ajaxem ze serveru</h2>
    <table id="result-set">
      <tr>
        <th>Jméno</th>
        <th>Příjmení</th>
        <th>Stupeň</th>
        <th>Semestr</th> 
        <th>Predměty</th> 
      </tr>
    </table>
  </div>
</body>
</html>

answered Dec 4, 2016 at 18:28

Juyal Ahmed

1181 silver badge6 bronze badges

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

1 Comment

dzb Over a year ago

It still doesnt work, table is empty, can you try to check the code snippet again?

ggradnig · Accepted Answer · 2016-12-04 18:23:01Z

0

You might have a syntax error in this line:

$("tr").append("<td>"key + ": " + val + "</td><td>" + predmety.join(",") + " ")

Insert a + between your <td> tag and the word key like so:

$("tr").append("<td>" + key + ": " + val + "</td><td>" + predmety.join(",") + " ")

answered Dec 4, 2016 at 18:23

ggradnig

14.3k4 gold badges44 silver badges66 bronze badges

Comments

R. McIntosh · Accepted Answer · 2016-12-04 21:19:44Z

0

The first fix was to add the reference to your blank table, as answered by @Juyal Ahmed.

Giving the table an id here:

<table id="result-set">

And then doing a query to look it up here:

$("#result-set").append

The problem I'm seeing now is a Cross-Origin issue. Check out the console:

output of the console showing CORS error

answered Dec 4, 2016 at 21:19

R. McIntosh

1664 bronze badges

Collectives™ on Stack Overflow

Fetch JSON data from server to table

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related