Итерировать по объекту с использованием javascript для создания строк таблицы с данными таблицы - PullRequest
Новая
       3

Итерировать по объекту с использованием javascript для создания строк таблицы с данными таблицы

0 голосов
/ 27 мая 2020

Цель состоит в том, чтобы отобразить строки с 4 столбцами cell, являющимися <td>. Однако у объекта есть 5 точек данных. Как можно выполнить итерацию объекта, чтобы он отображался с uuid как value кнопок, отображаемых в 4-м столбце? Если есть другой способ добиться этого, чем ниже? 

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

1 Ответ

1 голос
/ 27 мая 2020

Сначала извлеките свойство uuid из объекта, затем выполните итерацию по другим свойствам .

Кроме того, для массивов не перебирайте его keys, так как они не используются - просто перебирайте сам массив с помощью forEach или for..of.

Я бы также рекомендовал использовать более информативное имя переменной - ваш obj не простой объект, но массив, поэтому назовите его arr или residentsArr или что-то в этом роде, иначе вы можете позже запутать себя (и будущих читателей скрипта). 

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>
...