Question 278309 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Build table row for each object & cell for each property

Trying to populate a table with JSON data. I’m new to JSON.

console.log(JSON.stringify(users)) = 
[{
"fullname":"Bob Wirth",
"email":"Bob @mydomain.com",
"status":"A",
"lockcnt":"0",
"lastlogin":"2023-10-24 23:50:08.304896"
},{
"fullname":"Jane",
"email":"[email protected]",
"status":"A",
"lockcnt":"0",
"lastlogin":"2023-11-03 11:31:57.18215"
}]

How do I build an each to iterate through each object and then each property so I can generate the tr tag on the object and td on the property.

Tags:

2

Answers


  1. 0

    there. I’d like to recommend this code.

    import { useState } from "react";

import logo from "./logo.svg";
import "./App.css";

const mockDb = [
  {
    fullname: "Bob Wirth",
    email: "Bob @mydomain.com",
    status: "A",
    lockcnt: "0",
    lastlogin: "2023-10-24 23:50:08.304896",
  },
  {
    fullname: "Jane",
    email: "[email protected]",
    status: "A",
    lockcnt: "0",
    lastlogin: "2023-11-03 11:31:57.18215",
  },
];

const titles = ["fullname", "email", "status", "lockcnt", "lastlogin"];

function Test() {
  return (
    <>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <hr />
          <table style={{ width: 100, border: "1px white solid" }}>
            <tr>
              {titles.map((i, index) => (
                <th key={index}>{i}</th>
              ))}
            </tr>
            {mockDb.map((i, index) => (
              <tr key={index}>
                {Object.values(i).map((item, index) => (
                  <td key={index}>{
                     item
                  }</td>
                ))}
              </tr>
            ))}
          </table>
        </header>
      </div>
    </>
  );
}

export default Test;

    Firstly, you should prepare the titleArray and build the head of the table, then, you scatter the data’s property on the table.

    Good luck.

    Login or Signup to reply.
  2. 0

    If we don’t make any assumptions, like you want the table to display the Keys as the Headers, then you will want to perform a loop with a nested loop. The first loop will create the Rows, from each element of the Array. The second loop will populate the Cells from the Object.

    A basic example:

    $(function() {
  var users = [{
    "fullname": "Bob Wirth",
    "email": "Bob @mydomain.com",
    "status": "A",
    "lockcnt": "0",
    "lastlogin": "2023-10-24 23:50:08.304896"
  }, {
    "fullname": "Jane",
    "email": "[email protected]",
    "status": "A",
    "lockcnt": "0",
    "lastlogin": "2023-11-03 11:31:57.18215"
  }];

  function makeTable(bodyData, target) {
    var $t = $("<table>");
    $.each(bodyData, function(key, row) {
      $("<tr>").appendTo($t);
      $.each(row, function(i, cell) {
        $("<td>").html(cell).appendTo($("tr:last", $t));
      });
    });
    if (target != undefined) {
      $(target).html($t);
    }
    return $t;
  }
  
  makeTable(users, "#results");
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results"></div>

    From this, you could perform a lot of additional steps, for example, you could collect the Keys from one of the Objects and build headers for the Table.

    There re also a lot of frameworks that can be used, like Datatables, that will do this all for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search