CODEWITHSUNDEEP
javascriptjavascript-objects
ckingchris
ckingchris

Reputation: 609

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

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);
});

Upvotes: 0

Views: 768

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370609

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>

Upvotes: 1

Related Questions