1

I have been searching the solution to my problem for four days, and I still can't solve it.

I want to convert a JSON string data (from an URL) into a dynamic table, using JQuery and JavaScript.

I have to load the JSON string using the jQuery.getJSON() function. I don't know how to combine those two things together.

I've been searching for forever and I still don't understand it. Sorry if I sound really stupid but I just can't make something out of it. Can someone please help me?

This is my code:

<html>
<head>
<h1> Inventory List </h1>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://wt.ops.few.vu.nl/api/--------"></script>
</head>

<body>
<script>
$(document).ready(function () {
    $.getJSON(http://wt.ops.few.vu.nl/api/-------,
    function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].category + "</td>");
            tr.append("<td>" + json[i].name + "</td>");
            tr.append("<td>" + json[i].amount + "</td>");
            tr.append("<td>" + json[i].location + "</td>");
            tr.append("<td>" + json[i].date + "</td>");
            $('#table').append(tr);
        }
    });
});

</script>

<table id= "table">
  <tr>
    <th> Name of product</th>
    <th> Category</th>
    <th> Amount</th>
    <th> Location</th>
    <th> Date</th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td> 
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td> 
    <td> </td>
  </tr>
</table>
    </body>
    </html>
Improve this question
4
  • Is wt.ops.few.vu.nl your domain? If not, you have to use jsonp not json. Commented Jan 14, 2016 at 17:01
  • Welcome to Stack Overflow. Your code looks good at a glance. What errors do you get or what specifically is not working? Commented Jan 14, 2016 at 17:02
  • Also you may want to include some sample JSON data that can be used for testing. Commented Jan 14, 2016 at 17:03
  • I see syntax issue too: .getJSON('http://wt.ops.few.vu.nl/api/--------', function(json){}); Must wrap URL quotes. Commented Jan 14, 2016 at 17:06

2 Answers 2

Reset to default
2

I would advise using JSONP like so: https://jsfiddle.net/Twisty/0trde6es/5/

$(document).ready(function() {

  getData();

  function getData() {
    $.ajax({
      url: 'https://jsfiddle.net/echo/jsonp/',
      method: 'GET',
      dataType: "jsonp",
      error: function(xhr, status, error) {
        console.log(status, error);
      },
      success: function(json) {
        var tr;
        $.each(json, function(k, v) {
          tr = $("<tr></tr>");
          tr.append("<td>" + v.name + "</td>");
          tr.append("<td>" + v.category + "</td>");
          tr.append("<td>" + v.amount + "</td>");
          tr.append("<td>" + v.location + "</td>");
          tr.append("<td>" + v.date + "</td>");
          $("#invList").append(tr);
        });
      }
    });
  }
});

Since the site may not be on the same domain, and is not using HTTPS, I created the result data in a1 for testing. I used the following test data:

[{"category": "Fruit", "name": "Banana", "amount": 15, "location": "Amsterdam", "date": "2014-10-05", "id": 13844}, {"category": "Fruit", "name": "Apple", "amount": 58, "location": "Amsterdam", "date": "2014-02-05", "id": 13845}, {"category": "Furniture", "name": "Chair", "amount": 3, "location": "Hilversum", "date": "2014-12-10", "id": 13846}, {"category": "Furniture", "name": "Table", "amount": 5, "location": "Rotterdam", "date": "2011-07-13", "id": 13847}]

Using $.each() is just a faster way of handling object data. There is nothing wrong with your for() loop and may work better depending on your needs.

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

2 Comments

Thanks so much for your answer! I found the first answer to my question a bit easier to comprehend (due to my lack of insight in webtechnology) but thank you very much for helping me.
@Webstudent glad to hear that. If you feel like it, you should mark one of them as the answer or Upvote either.
0

This should work

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

<body>
<h1> Inventory List </h1>
<script>
$(document).ready(function () {
    $.getJSON('http://wt.ops.few.vu.nl/api/--------',
    function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].category + "</td>");
            tr.append("<td>" + json[i].name + "</td>");
            tr.append("<td>" + json[i].amount + "</td>");
            tr.append("<td>" + json[i].location + "</td>");
            tr.append("<td>" + json[i].date + "</td>");
            $('#table').append(tr);
        }
    });
});

</script>

<table id= "table">
  <tr>
    <th> Name of product</th>
    <th> Category</th>
    <th> Amount</th>
    <th> Location</th>
    <th> Date</th>
  </tr>

</table>
</body>
</html>
Improve this answer

1 Comment

thank you so much for your answer!! i finally understand how to make a table using append instead of creating empty "boxes" in the tables.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.