HTML Таблица, создающая подстроки из родительской

Question

У меня есть таблица HTML с информацией, полученной с удаленных подсайтов SharePoint, и я заполняю их на отдельной странице сайта. Я хочу иметь возможность заполнять строки / подстрочки на основе «Атрибут программы», вместо этого он печатает заголовок программы несколько раз, а не один раз.

Вот как это выглядит.

Фактический результат:

**Expected Result** 
    +------------+----------------------+-----------+------------+--------------+--------------+
    | Program    | To                   |  Date     |   Approved | Notes        | Deliverable  |
    +------------+----------------------+-----------+------------+--------------+--------------+
    | Program 1  | example@example.com  | 12/23/2018| Yes        | Example Notes| MSR          |
    |            | example@example.com  | 03/30/2020| Yes        | Example Notes| Meeting Mins |
    +------------+----------------------+-----------+------------+--------------+--------------+
    | Program 2  | example@example.com  | 12/23/2018| Yes        | Example Notes| MSR          |
    |            | example@example.com  | 12/03/2017| Yes        | Example Notes| Meeting Mins |
    +------------+----------------------+-----------+------------+--------------+--------------+
    | Program 3  | example@example.com  | 04/17/2020| Yes        | Example Notes| MSR          |
    |            | example@example.com  | 03/30/2020| No         | Example Notes| Meeting Mins |
    +------------+----------------------+-----------+------------+--------------+--------------+

Here is my code: How can I alter it to match the Expected Results table directly above. Is it possible without having to alter to much of the code itself? (I only have two for each program just for the example the final amount will be a much larger number that will constantly update and add more as they are uploaded to the site.)

 function loadData(source, url) {
      return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
        .then((r) => {
          if (!r.ok) throw new Error("Failed: " + url);  // Check for errors
          return r.json();  // parse JSON
        })
        .then((data) => data.d.results) // unwrap to get results array
        .then((results) => {
          results.forEach((r) => (r.source = source)); // add source to each item
          return results;
        });
    }
    
    window.addEventListener("load", function () {
      Promise.all([
        loadData("XDeliverables", "/_api/web/lists/getbytitle('XDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
        loadData("YDeliverables", "/_api/web/lists/getbytitle('YDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
        loadData("ZDeliverables", "/_api/web/lists/getbytitle('ZDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
      ])
    
            .then(([r1, r2, r3]) => {
              const objItems = r1.concat(r2,r3);
              console.log(objItems);
              var tableContent =
                ' Программа  '+ " Кому " + « Дата отправки « + » Утверждено « + » Примечания « + »  Результат  "+"  "; для (var я = 0; я "; tableContent + = "" + objItems [i] .Program + ""; tableContent + = ""; tableContent + = ""; tableContent + = " "; tableContent + = "" + objItems [i] .To + ""; tableContent + = "" + objItems [i] .Date + ""; tableContent + = "" + objItems [i] .Approved + ""; tableContent + = "" + objItems [i] .Notes + ""; tableContent + = "" + objItems [i] .Deliverable + ""; tableContent + = ""; } $ ("# результатов"). append (tableContent); }) .catch ((err) => {alert ("Ошибка:" + err); console.error (err);}); });