Iterate through object using javascript to generate table rows with table data

Question

The goal is to render rows with 4 columns cell being the <td>. However the object has 5 data points. How can the object be iterated over so that this will render with the uuid as the value of the buttons rendered in the 4th column? If there is another way to achieve this than below?

const obj = [
    {
        resident: "Lily",
        date: "05/29/2020",
        type: "Basketball Court",
        status: "approved",
        uuid: "ksjdiofjoij3i4jovoii3ni"
    },{
        resident: "Kyle",
        date: "05/30/2020",
        type: "Swimming Pool",
        status: "denied",
        uuid: "wiczoixmcie923fjffj23jij"
    }
];

const table = document.querySelector("#table");
Object.keys(obj).forEach(key => {
    let row = document.createElement("TR");
    Object.entries(obj[key]).forEach(([k, v]) => {
        if (k !== "uuid") {
            let cell = document.createElement("TD");
            if (k === "status") {
                cell.innerHTML = `
                    <button value="` + UUIDHERE + `"class="approve-btn">Approve</button>
                    <button value="` + UUIDHERE + `"class="deny-btn">Deny</button>`;
            } else {
                cell.innerHTML = v;
            }
            row.appendChild(cell);
        }
    });
    table.appendChild(row);
});

CertainPerformance · Accepted Answer · 2020-05-27 16:22:54Z

Extract the uuid property from the object first, then iterate over the other properties.

Also, for arrays, don't iterate over its keys, since they aren't being used - just iterate over the array itself with forEach or for..of.

I'd also recommend using a more informative variable name - your obj isn't a plain object, but an array, so call it arr, or residentsArr, or something like that, else you may cause yourself (and future readers of the script) confusion later.

const residentsArr = [
    {
        resident: "Lily",
        date: "05/29/2020",
        type: "Basketball Court",
        status: "approved",
        uuid: "ksjdiofjoij3i4jovoii3ni"
    },{
        resident: "Kyle",
        date: "05/30/2020",
        type: "Swimming Pool",
        status: "denied",
        uuid: "wiczoixmcie923fjffj23jij"
    }
];
residentsArr.forEach(({ uuid, ...rest }) => {
    const row = document.createElement("TR");
    Object.entries(rest).forEach(([k, v]) => {
        const cell = document.createElement("TD");
        if (k === "status") {
            cell.innerHTML = `
                <button value="${uuid}" class="approve-btn">Approve</button>
                <button value="${uuid}" class="deny-btn">Deny</button>`;
        } else {
            cell.innerHTML = v;
        }
        row.appendChild(cell);
    });
    table.appendChild(row);
});

<table id="table"></table>

Collectives™ on Stack Overflow

Iterate through object using javascript to generate table rows with table data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related