CODEWITHSUNDEEP
javascriptjqueryarraysjson
dzb
dzb

Reputation: 21

Fetch JSON data from server to table

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>

Upvotes: 1

Views: 366

Answers (3)

R. McIntosh
R. McIntosh

Reputation: 166

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

Upvotes: 0

Juyal Ahmed
Juyal Ahmed

Reputation: 118

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>

Upvotes: 1

ggradnig
ggradnig

Reputation: 14149

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(",") + " ")

Upvotes: 0

Related Questions