Как сделать вывод данных?

Question

[enginel]

Как вывести название института + количество сотрудников в скобках и под ним список сотрудников? Сейчас выводится название института, а далее undefined, undefined.

Нужен такой вывод:

МГУ (2)
* Лобанов А.А.
профессор
* Косарев И.Е.
доцент

МГИМО (3)
* Тищенко Л.Д.
профессор
* Дьякова И.М.
доцент
* Борисов К.К.
доцент

<div class="field">

  <div class="button"><h2>click</h2></div>
  
<div class="result-field">
  
</div>


</div>

<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/script.js"></script>

$( ".button" ).click(function() {
$.getJSON('doc.json', function(data) {
		var output = '<ul class="results">';
		$.each(data, function(key, val) {
			output +='<h2>'  + val.univ + '</h2>';
			output +='<li>';
			output +='<h3>'  + val.name + '</h3>';
			output +='<h3>'+ val.grade + '</h3>';
			output +='</li>';
		}); 
		output += '</ul>';
		$('.result-field').html(output);	
});
});

[
{
  "univ": "МГУ",
"sotr" : [
  {
    "name": "Лобанов А.А.",
    "grade": "профессор",
  },
    {
    "name": "Косарев И.Е.",
    "grade": "доцент",
  }
]
},
{
  "univ": "МГИМО",
"sotr" : [
  {
    "name": "Тищенко Л.Д.",
    "grade": "профессор",
  },
    {
    "name": "Дьякова И.М.",
    "grade": "доцент",

  },
    {
    "name": "Борисов К.К.",
    "grade": "доцент",
  }
]
}
]

Comments

[alex]

вот есть template strings, нахрена продолжать эту дичь нечитаемую юзать?

Answer 1

[0xD34F]

const output = data
  .map(n => `
    <div>
      <h2>${n.univ} (${n.sotr.length})</h2>
      <ul>${n.sotr.map(m => `
        <li>
          <h3>${m.name}</h3>
          <h3>${m.grade}</h3>
        </li>`).join('')}
      </ul>
    </div>`)
  .join('');