Как привязать номер данных строки для заголовка?

Question

Я получаю ниже json данные

[
  {ProcessName: "Process_1",  DocumentName: "Doc_1"}
  {ProcessName: "Process_1",  DocumentName: " Doc_2 "}
  {ProcessName: "Process_2",  DocumentName: "Doc_1"}
  {ProcessName: "Process_2",  DocumentName: " Doc_3 "}
  {ProcessName: "Process_3",  DocumentName: "Doc_1"}
  {ProcessName: "Process_3",  DocumentName: " Doc_2"}
  {ProcessName: "Process_3",  DocumentName: " Doc_3 "}
]

if (data.objData.length > 0) {
  var str4 = '';
  str4 += '<table class="table table-striped">'
  str4 += '<tr>'
  
  $.each(data.objData, function(index, item) {
    str4 += '<th style="text-align: center;">' + item.ProcessName + '</th>'
  })
  
  str4 += '</tr>'
  str4 += '<tr>'
  
  $.each(data.objData, function(index, item) {
    str4 += '<td style="text-align: center;">' + item.DocumentName + '</td>'
  })
  
  str4 += '</tr>'  
  str4 += '</table>'
  
  $("#tblProjectsmap").empty();
  $("#tblProjectsmap").append(str4);
}

<div class="row">
  <div class="col-md-12" id="tblProjectsmap">
  </div>
</div>

Я хочу связать нижеуказанным способом в табличном формате, используя jQuery. Я получаю несколько имен процессов, которые имеют несколько документов для каждого процесса. Я не могу сделать это правильно под одним заголовком. Заголовок моей таблицы будет Process_1, Process_2, Process_3, а под строкой будет список документов.

Process_1        Process_2    Process_3   
Doc_1             Doc_1        Doc_1
Doc_2             Doc_3        Doc_2
                               Doc_3