How do I put JSON data into a table?

Question

I have a function in my JS file that brings back data from a PostgreSQL table. I want to display the results in a table in my HTML file but at the moment I am getting an undefined response.

JS function:

function ReadAllResult(json, status, req)
{    
    let html ="";
    for (let s in json)
    {
        let student =json[s];
        html += `Name: ${student.Name} `;
        html += `Age: ${student.Age} Course: ${student.Course}<br/>`;
    }
    $("#all-students tbody").append(`<tr><td>${html.Name}</td><td>${html.Age}</td><td>${html.Course}</td></tr>`);
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>See All Products Page</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <form action="" method="POST">
        <input id="read-button" type="button" value="See all Products" />    
    </form>

    <!-- <div id ="all-students"> </div> -->
    <table id="all-students">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Course</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Loading..</td>
            </tr>
        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script src="js/readstudentspage.js"></script>
  </body>
</html>`

Answer 1

Assuming you get the JSON from a file using $.getJSON or other AJAX, the data is an object when it reaches the function

Also assuming the JSON looks like this

[{"Name": "Joe", "Age": 18, "Course": "JS101"}, {"Name": "Brad", "Age": 17, "Course": "Algebra"}]

we can have a process like this

 const process = data => { $("#all-students tbody").html( data.map(({Name,Age,Course}) => `<tr><td>${Name}</td><td>${Age}</td><td>${Course}</td></tr>`).join('') ); }; // $.getJSON("students.json",process); // uncomment this and remove the lines below const data = JSON.parse(`[{"Name": "Joe", "Age": 18, "Course": "JS101"}, {"Name": "Brad", "Age": 17, "Course": "Algebra"}]`) process(data)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="" method="POST"> <input id="read-button" type="button" value="See all Products" /> </form> <.-- <div id ="all-students"> </div> --> <table id="all-students"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Course</th> </tr> </thead> <tbody> <tr> <td>Loading..</td> </tr> </tbody> </table>

Answer 2

Your code had some issues:

I have Used your logic and fixed it.

 function ReadAllResult(json) { let html = {}; $("#all-students tbody tr:first-child").remove(); for (let i=0; i < json.length; i++) { html = json[i]; $("#all-students tbody").append(`<tr><td>${html.Name}</td><td>${html.Age}</td><td>${html.Course}</td></tr>`); } } const data = [ {Name: 'name1', Age:24, Course:1}, {Name: 'name2', Age:25, Course:1} ]; ReadAllResult(data);

 <.DOCTYPE html> <html> <head> <title>See All Products Page</title> <meta charset="utf-8" /> </head> <body> <form action="" method="POST"> <input id="read-button" type="button" value="See all Products" /> </form> <.-- <div id ="all-students"> </div> --> <table id="all-students"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Course</th> </tr> </thead> <tbody> <tr> <td>Loading:.</td> </tr> </tbody> </table> <script src="https.//code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> <script src="js/readstudentspage.js"></script> </body> </html>`

How do I put JSON data into a table?

Question

2 answers

solution1
0 2023-01-03 13:20:35

solution2
0 2023-01-03 13:31:51

How do I put JSON data into a table?

Question

2 answers

solution1 0 2023-01-03 13:20:35

solution2 0 2023-01-03 13:31:51

solution1
0 2023-01-03 13:20:35

solution2
0 2023-01-03 13:31:51