Блог

Главная - Вопросы по программированию - функция для перебора пользователей и вставки в html

функция для перебора пользователей и вставки в html

#javascript #class

#javascript #класс

Вопрос:

Я хотел бы создать функцию, которая может перебирать мои объекты, которая принимает моих пользователей в качестве параметра. Прямо сейчас я создал цикл, который принимает только первого пользователя: хенрик, но как я могу создать функцию, в которую я могу вставить всех остальных пользователей в качестве параметра? надеюсь, вы, ребята, можете дать мне несколько советов!

 class User {
    constructor(firstname, lastname, age, gender, rightHanded){
        this.firstName = firstname;
        this.lastname = lastname;
        this.age = age;
        this.gender = gender;
        this.rightHanded = rightHanded;
    }
}
const henrik = new User("Henrik", "Thorn", 34, "male", true);
const hans = new User("Hans", "Thorn", 17, "male", true);
const jørgen = new User("jøren", "Thorn", 18, "male", true);
const liv = new User("liv", "Thorn", 17, "femal", true);

document.addEventListener("DOMContentLoaded", function() {
    let table = document.getElementById("personProfile");
    let html = "";
    let objectKeys = Object.keys(henrik);

    for (let objectKey of objectKeys) {
      html  = "<tr><td>"   objectKey   "</td><td>"   henrik[objectKey]   "</td></tr>";
    }

    table.innerHTML = html;
});

Комментарии:

1. Я добавил пример к своему ответу: jsfiddle.net/myutga79

Ответ №1:

Я думаю, то, что вы ищете, — это способ пройти через каждого пользователя и заставить их отображать внутри таблицы.

 class User {
    constructor(firstname, lastname, age, gender, rightHanded){
        this.firstName = firstname;
        this.lastname = lastname;
        this.age = age;
        this.gender = gender;
        this.rightHanded = rightHanded;
    }
}

const henrik = new User("Henrik", "Thorn", 34, "male", true);
const hans = new User("Hans", "Thorn", 17, "male", true);
const liv = new User("liv", "Thorn", 17, "femal", true);
const jorgen = new User("jøren", "Thorn", 18, "male", true);


function loadUsersOnHTML(users) {
    let html = "";
    users.forEach( user => {
        let table = document.getElementById("personProfile");
        for (let key in user) {
            html  = "<tr><td>"   key   "</td><td>"   user[key]   "</td></tr>";
        }
        table.innerHTML = html;
    })
}

document.addEventListener("DOMContentLoaded", function() {
    const users = [henrik, hans, jorgen, liv,];
    loadUsersOnHTML(users);
});

Ответ №2:

Сначала добавьте всех ваших пользователей в массив:

 const userArray = [];
userArray.push(new User("Henrik", "Thorn", 34, "male", true));
userArray.push(new User("Hans", "Thorn", 17, "male", true));
... etc

Затем вы можете перебирать каждого пользователя

 for (let user of userArray) {
   renderUser(user);
}

А затем создайте renderUser функцию, которая выполняет ваш html и вставляет его.

например: https://jsfiddle.net/myutga79 /