How to create multiple tables based on JSON values

Question

I am trying to create multiple tables based on values from an object.

[
    {
        itemFolder: "personal"
        itemLocation: "right infront of me"
        itemName: "macBook"
        itemNotes: "Space Gray"
    },
    {
        itemFolder: "professional"
        itemLocation: "behind me"
        itemName: "Dell"
        itemNotes: "Black"
    },
    {
        itemFolder: "student"
        itemLocation: "left of me"
        itemName: "HP"
        itemNotes: "silver"
    },
    {
        itemFolder: "worker"
        itemLocation: "right of me"
        itemName: "Lenovo"
        itemNotes: "black"
    },
    {
        itemFolder: "worker"
        itemLocation: "behind me"
        itemName: "HP"
        itemNotes: "silver"
    },
    // around 20 more items
]

I want to create several different tables, where the item location, name, and notes are displayed, and the tables are filtered/centered around what is inside of itemFolder. How would I do that?

For example:

Worker:

itemlocation:   itemName:

right of me     Lenovo

behind me       HP

and then for professional, student, and so on.

Build the actual JSON object and post it here. You should also look into [DataTables](https://datatables.net/). You will see that you can easily bind your JSON objects to DataTables which comes with a filter by default. — Hanlet Escaño, Mar 30 '21 at 20:08
[There is no such thing as a JSON object](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/) You just have an array of objects. No need to embellish that with acronyms. — Heretic Monkey, Mar 30 '21 at 22:48
Sounds like you want to group your objects by a property? There are a number of questions about that, depending on the end result you want. I'd suggest [How to group an array of objects by key](https://stackoverflow.com/q/40774697/215552) — Heretic Monkey, Mar 30 '21 at 22:53

score 0 · Answer 1 · answered Mar 31 '21 at 02:23

I'm not sure I understood exactly what you want

But since you want to display data in a table, I came up with this simple 5 step JS implementation of a table using your data, hope it helps

I encapsulated your data in a const, so that we have an array of items, each being an object


const data = [
  {
    itemFolder: "personal",
    itemLocation: "right infront of me",
    itemName: "macBook",
    itemNotes: "Space Gray",
  },
  {
    itemFolder: "professional",
    itemLocation: "behind me",
    itemName: "Dell",
    itemNotes: "Black",
  },
  {
    itemFolder: "student",
    itemLocation: "left of me",
    itemName: "HP",
    itemNotes: "silver",
  },
 // ...
];

Then I create some HTML elements needed for us to have a table

const table = document.createElement("table");
const thead = document.createElement("thead");
const tbody = document.createElement("tbody");

table.appendChild(thead);
table.appendChild(tbody);

Here we make our table header: We're simply iterating over one array's object keys, and appending a new th element to our previously created thead, for each property our objcet has. We should also set the textContent of the tr element with the property key name

for (let key of Object.keys(data[0])) {
  const th = document.createElement("th");
  th.textContent = key;
  thead.appendChild(th);
}

And finally we iterate over the data. For each piece of data we will create 4 td elements Each of them should receive a property value as it's textContent. At the bottom, we append our td elements to the tbody

data.forEach((item, i) => {
  const tr = document.createElement("tr");

  const td0 = document.createElement("td");
  const td1 = document.createElement("td");
  const td3 = document.createElement("td");
  const td2 = document.createElement("td");

  td0.textContent = item.itemFolder;
  td1.textContent = item.itemName;
  td2.textContent = item.itemLocation;
  td3.textContent = item.itemNotes;

  tr.appendChild(td0);
  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);

  tbody.appendChild(tr);
});

Last step, append our whole creation to the DOM

document.body.appendChild(table);

The result is something like this:

the only styling I added was

td, th {
 border: 1px solid;
}

But you can definitely do a lot better in your CSS

score 0 · Answer 2 · answered Apr 01 '21 at 14:11

const table = (a) =>`<table>${a}</table>`;
const tr = (a) =>`<tr>${a}</tr>`;
const td = (a) =>`<td>${a}</td>`;

const tableFromArrayObjects = (data) => {
  const keys = Object.keys(data[0]);
  return table(
    tr(keys.map(td).join("")) +
      data
        .map((v) =>
          keys
            .map(td)
            .join("")
        )
        .map(tr)
        .join("")
  );
};

How to create multiple tables based on JSON values

2 Answers2