Unable to generate table HTML using JSON? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Unable to generate table HTML using JSON? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I’m just trying to generate a table using info from a JSON file but it is not working – I am new to HTML so I can’t see what I am doing wrong. The JSON file called food.json is just like:

[
{
      "Type": "Snack",
      "Flavour": "Salted",
      "Brand": "Walkers"
   },
   {
      "Type": "Dessert",
      "Flavour": "Chocolate",
      "Brand": "Alpro",
   }
]

I have a javascript file called test.js with the following:

    $(document).ready(function () {

        $.getJSON("food.json",
            function (data) {
                var food = '';

                $.each(data, function (key, value) {

                    food += '<tr>';
                    food += '<td>' +
                        value.Type + '</td>';

                    food += '<td>' +
                        value.Flavour + '</td>';

                    food += '<td>' +
                        value.Brand + '</td>';

                    food += += '</tr>';
                });

                $('#table').append(food);
            });
    });

And below is my HTML:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="jquery-3.5.1.js"></script>
        <script src="test.js"></script>
        <title>Fave Food</title>
    </head>
    <body>
        <h1>My Fave Food</h1>
        <form>
            <button onclick="getJSON()">Click for My Fave Food!</button>
        </form>
        <table id="table">
            <thead>
            <tr>
                <th>Type</th>
                <th>Flavour</th>
                <th>Brand</th>
            </tr>
            </thead>
        </table>
    </body>
    </html>

Answer

Well $.parseJSON is parsing json string, as I see you need to catch a file so you should use $.getJSON as it’s shortend function to the $.ajax request.

All other should be fine.

EDIT: I have tested it, and it looks like your $.getJSON gives error instead of success, i guess your json should be formated, so when i used it like this it worked [{"Type":"Snack","Flavour":"Salted","Brand": "Walkers"},{"Type": "Dessert","Flavour":"Chocolate","Brand":"Alpro"}]

And also your button was in form, so it was refreshing every time the whole page, so i putted attribut type="button", so it doesnt trigger form submit.

Here’s full working solution:

food.json

[{"Type": "Snack","Flavour": "Salted","Brand": "Walkers"},{"Type": "Dessert","Flavour": "Chocolate","Brand": "Alpro"}]

test.js

function getJSON() {
    
    $.getJSON("food.json", function (data) {
            var food = '';
            console.log( data );
            $.each(data, function (key, value) {

                food += '<tr>';
                food += '<td>' +
                    value.Type + '</td>';

                food += '<td>' +
                    value.Flavour + '</td>';

                food += '<td>' +
                    value.Brand + '</td>';

                food += '</tr>';
            });

            $('#table').append(food);
        }).done(function() {
    console.log( "second success" );
  })
  .fail(function(data) {
    console.log( "error", data );
  })
  .always(function() {
    console.log( "complete" );
  });
            
}

html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="test.js"></script>
    <title>Fave Food</title>
</head>
<body>
    <h1>My Fave Food</h1>
    <form>
        <button type="button" onclick="getJSON();">Click for My Fave Food!</button>
    </form>
    <table id="table">
        <thead>
        <tr>
            <th>Type</th>
            <th>Flavour</th>
            <th>Brand</th>
        </tr>
        </thead>
    </table>
</body>
</html>
We are here to answer your question about Unable to generate table HTML using JSON? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji