нужна помощь с объектами в js

Question

let inform = [
{
    name:'name1',
    surname:'surname1',
    languages:['Angular','PHP','JS'],
    assessments:[{names:'Angular', assessment:20},{names:'PHP', assessment:20},{names:'JS', assessment:20},]
},
    
{
    name:'name2',
    surname:'surname2',
    languages:['Angular','PHP','JS'],
    assessments:[{names:'Angular', assessment:20},{names:'PHP', assessment:20},{names:'JS', assessment:20},]
},
    
{
    name:'name3',
    surname:'surname3',
    languages:['Angular','PHP','JS'],
    assessments:[{names:'Angular', assessment:20},{names:'PHP', assessment:20},{names:'JS', assessment:20},]
},
    
{
    name:'name4',
    surname:'surname4',
    languages:['Angular','PHP','JS'],
    assessments:[{names:'Angular', assessment:20},{names:'PHP', assessment:20},{names:'JS', assessment:20},]
},
    
{
    name:'name5',
    surname:'surname5',
    languages:['Angular','PHP','JS'],
    assessments:[{names:'Angular', assessment:20},{names:'PHP', assessment:20},{names:'JS', assessment:20},]
},
    
{
    name:'name6',
    surname:'surname6',
    languages:['Angular','PHP','JS'],
    assessments:[{names:'Angular', assessment:20},{names:'PHP', assessment:20},{names:'JS', assessment:20},]
},
    
{
    name:'name7',
    surname:'surname7',
    languages:['Angular','PHP','JS'],
    assessments:[{names:'Angular', assessment:20},{names:'PHP', assessment:20},{names:'JS', assessment:20},]
},
    
{
    name:'name8',
    surname:'surname8',
    languages:['Angular','PHP','JS'],
    assessments:[{names:'Angular', assessment:20},{names:'PHP', assessment:20},{names:'JS', assessment:20},]
},
    
{
    name:'name9',
    surname:'surname9',
    languages:['Angular','PHP','JS'],
    assessments:[{names:'Angular', assessment:20},{names:'PHP', assessment:20},{names:'JS', assessment:20},]
},
    
{
    name:'name10',
    surname:'surname10',
    languages:['Angular','PHP','JS'],
    assessments:[{names:'Angular', assessment:20},{names:'PHP', assessment:20},{names:'JS', assessment:20},]
},
            ]

  
let tbl = document.createElement('table');
tbl.setAttribute('class','table table-bordered');
cont.appendChild(tbl)
let thd = document.createElement('thead')
tbl.appendChild(thd)
let trs = document.createElement('tr');
thd.appendChild(trs)
for(let i = 0;i<4;i++){
    let ths = document.createElement('th');
    trs.appendChild(ths)
}
trs.children[0].innerHTML='Name';
trs.children[1].innerHTML='Surname';
trs.children[2].innerHTML='Languages';
trs.children[3].innerHTML='Assessment';
let tbd = document.createElement('tbody');

tbl.appendChild(tbd);

function inofs(){
   return inform.map(student=>{
        tbd.innerHTML=`
        <tr>
       <td>${student.name}</td>
      <td>${student.surname}</td>
      <td>
          <ul>
              <li>${student.languages[0]}</li>
              <li>${student.languages[1]}</li>
              <li>${student.languages[2]}</li>
          </ul>  
      </td>
      <td>
       <div class="table-responsive">
  <table class="table table-bordered" style="width: 200px">
    <thead>
        <tr class="bg-success">
            <th>Subject</th>
            <th>Assessment</th>
        </tr>
    </thead>
    <tbody class="bg-success">
        <tr>
            <td>${student.assessments.names[0]}</td>
            <td>${student.assessments.assessment[0]}</td>
        </tr>
        <tr>
            <td>${student.assessments.names[1]}</td>
            <td>${student.assessments.assessment[1]}</td>
        </tr>
        <tr>
            <td>${student.assessments.names[2]}</td>
            <td>${student.assessments.assessment[2]}</td>
        </tr>
    </tbody>
  </table>
</div>
        </td>
     </tr>
    `
    })
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <title>oop1</title>
    <style>
        .table{
            background-color: #373a3c;
        }
        th,td,tr{
            color: white
        }
     </style>
</head>
<body>
  <div class="container" id="cont">
  </div>
</body>
</html>

как видите в таблице 4 колонны, пытаюсь вывести под каждым названием соответствующую информацию о студентах, но получаю или только первый объект или undefinde или как в приведённом примере, ничего не выводится

Answer 1

Во-первых, не вызвана сама функция infos.
Во-вторых, индексация вызывается не у того поля - student.assessments.names[0] -> student.assessments[0].names
В-третьих, на каждой итерации .map - перезаписывается содержимое таблицы, вместо добавления.

Если все поправить может получиться следующее:

let inform = [{
    name: 'name1',
    surname: 'surname1',
    languages: ['Angular', 'PHP', 'JS'],
    assessments: [{
      names: 'Angular',
      assessment: 20
    }, {
      names: 'PHP',
      assessment: 20
    }, {
      names: 'JS',
      assessment: 20
    }]
  },

  {
    name: 'name2',
    surname: 'surname2',
    languages: ['Angular', 'PHP', 'JS'],
    assessments: [{
      names: 'Angular',
      assessment: 20
    }, {
      names: 'PHP',
      assessment: 20
    }, {
      names: 'JS',
      assessment: 20
    }]
  },

  {
    name: 'name3',
    surname: 'surname3',
    languages: ['Angular', 'PHP', 'JS'],
    assessments: [{
      names: 'Angular',
      assessment: 20
    }, {
      names: 'PHP',
      assessment: 20
    }, {
      names: 'JS',
      assessment: 20
    }]
  },

  {
    name: 'name4',
    surname: 'surname4',
    languages: ['Angular', 'PHP', 'JS'],
    assessments: [{
      names: 'Angular',
      assessment: 20
    }, {
      names: 'PHP',
      assessment: 20
    }, {
      names: 'JS',
      assessment: 20
    }]
  },

  {
    name: 'name5',
    surname: 'surname5',
    languages: ['Angular', 'PHP', 'JS'],
    assessments: [{
      names: 'Angular',
      assessment: 20
    }, {
      names: 'PHP',
      assessment: 20
    }, {
      names: 'JS',
      assessment: 20
    }]
  },

  {
    name: 'name6',
    surname: 'surname6',
    languages: ['Angular', 'PHP', 'JS'],
    assessments: [{
      names: 'Angular',
      assessment: 20
    }, {
      names: 'PHP',
      assessment: 20
    }, {
      names: 'JS',
      assessment: 20
    }]
  },

  {
    name: 'name7',
    surname: 'surname7',
    languages: ['Angular', 'PHP', 'JS'],
    assessments: [{
      names: 'Angular',
      assessment: 20
    }, {
      names: 'PHP',
      assessment: 20
    }, {
      names: 'JS',
      assessment: 20
    }]
  },

  {
    name: 'name8',
    surname: 'surname8',
    languages: ['Angular', 'PHP', 'JS'],
    assessments: [{
      names: 'Angular',
      assessment: 20
    }, {
      names: 'PHP',
      assessment: 20
    }, {
      names: 'JS',
      assessment: 20
    }]
  },

  {
    name: 'name9',
    surname: 'surname9',
    languages: ['Angular', 'PHP', 'JS'],
    assessments: [{
      names: 'Angular',
      assessment: 20
    }, {
      names: 'PHP',
      assessment: 20
    }, {
      names: 'JS',
      assessment: 20
    }]
  },

  {
    name: 'name10',
    surname: 'surname10',
    languages: ['Angular', 'PHP', 'JS'],
    assessments: [{
      names: 'Angular',
      assessment: 20
    }, {
      names: 'PHP',
      assessment: 20
    }, {
      names: 'JS',
      assessment: 20
    }]
  },
]


let tbl = document.createElement('table');
tbl.setAttribute('class', 'table table-bordered');
cont.appendChild(tbl)
let thd = document.createElement('thead')
tbl.appendChild(thd)
let trs = document.createElement('tr');
thd.appendChild(trs)
for (let i = 0; i < 4; i++) {
  let ths = document.createElement('th');
  trs.appendChild(ths)
}
trs.children[0].innerHTML = 'Name';
trs.children[1].innerHTML = 'Surname';
trs.children[2].innerHTML = 'Languages';
trs.children[3].innerHTML = 'Assessment';
let tbd = document.createElement('tbody');

tbl.appendChild(tbd);
inofs()

function inofs() {
  tbd.innerHTML = inform.map(student => {
    return `
        <tr>
       <td>${student.name}</td>
      <td>${student.surname}</td>
      <td>
          <ul>
              <li>${student.languages[0]}</li>
              <li>${student.languages[1]}</li>
              <li>${student.languages[2]}</li>
          </ul>  
      </td>
      <td>
       <div class="table-responsive">
  <table class="table table-bordered" style="width: 200px">
    <thead>
        <tr class="bg-success">
            <th>Subject</th>
            <th>Assessment</th>
        </tr>
    </thead>
    <tbody class="bg-success">
        <tr>
            <td>${student.assessments[0].names}</td>
            <td>${student.assessments[0].assessment}</td>
        </tr>
        <tr>
            <td>${student.assessments[1].names}</td>
            <td>${student.assessments[1].assessment}</td>
        </tr>
        <tr>
            <td>${student.assessments[2].names}</td>
            <td>${student.assessments[2].assessment}</td>
        </tr>
    </tbody>
  </table>
</div>
        </td>
     </tr>
    `
  }).join('')
}

.table {
  background-color: #373a3c;
}

th,
td,
tr {
  color: white
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container" id="cont">
</div>

БЛОГ НА HUSL

нужна помощь с объектами в js

Ответы (1 шт):