Блог

Главная - Вопросы по программированию - JavaScript как получить длину из массива map

JavaScript как получить длину из массива map

#javascript #reactjs #jsx

#javascript #reactjs #jsx

Вопрос:

Я новичок в JSX, и я пытаюсь получить количество сотрудников для каждой команды, this.state.teams[0].employee.length это даст мне количество сотрудников для [0] объекта в массиве, как я могу получить количество сотрудников для каждой команды и отобразить его только один раз?

 render() {
    const {teams, isLoading} = this.state;
    const { location } = this.props;

    if (isLoading) {
        return <p>Loading...</p>;
    }
    // console.log("Number of Employees team", this.state.teams[0].employee.length);
    

    const teamList = teams.map(team => {

        console.log("TEAM Employees", teams[0].employee.length);

        return <tr key={team.id}>
               <td>
                <div className="tableContent">
                    <div>
                         {team.name} 
                    </div>
                    <div>
                      <ul>{team.employee.map(employee => {
                       return <li key={employee.id}>{employee.name}: {employee.email}</li>
                      })}</ul>
                    </div>
                    <div>
                     {team.employee.map(employee => {
                       return <li key={employee.id}>{teams[0].employee.length}</li>
                      })}
                    </div>
                </div>                    
            </td>
        </tr>
    });

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

1. что такое teams ?

2. teams задан ли массив в constructor this.state = {teams: [] } с ответом api, который setState({teams: data})

3. можете ли вы привести пример объектов внутри teams массива

4.это то, что показано в console.log(teams) 0: {id:1 name: "Team1", employees: Array(2)}

5. Я считаю, что это team.employee.length сработало бы

Ответ №1:

Вы можете попробовать это для конкретной команды:

 const teamList = teams.map(team => {
   console.log("TEAM Employees", team.employee.length);
}

или это для количества сотрудников во всех командах:

 const numberOfAllEmployees = teams.map(team => team.employee.length).reduce((a,b) => a   b);

Ответ №2:

Вы можете использовать Object.keys(teams[0].employee).length

Метод Object.keys() возвращает массив собственных перечислимых имен свойств данного объекта, повторяющихся в том же порядке, что и в обычном цикле. MDN