如何通过分组使用 html 和 javascript 很好地显示 json 行

Question

所以我花了好几个小时试图弄清楚这个问题，答案可能就在我的面前，就像往常一样。

基本上我有一个格式如下的数组

[
     TextRow{
        unitsession_id: 19,
        unitsession_title: 'Lecture week 1',
        unitsession_description: 'Week 1 lecture',
        unitsession_type: 'Lecture',
        unitsession_weekno: 1,
        unitsession_unit_id: 5
    },
    TextRow {
        unitsession_id: 20,
        unitsession_title: 'Practical 1',
        unitsession_description: 'Week 1 practical',
        unitsession_type: 'Practical',
        unitsession_weekno: 1,
        unitsession_unit_id: 5
    },
    TextRow {
        unitsession_id: 23,
        unitsession_title: 'lecture week 2',
        unitsession_description: 'Week 2 another practical',
        unitsession_type: 'Lecture',
        unitsession_weekno: 2,
        unitsession_unit_id: 5
    }
]

我希望能够通过 unitsession_unit_id 的分组在 HTML 页面上显示这些。在这种特殊情况下，它会显示类似这样的内容...

第 1 周：

第 1 周讲座

实用1

第 2 周：

第二周讲座

我目前使用的 JavaScript (Node JS) 将数据显示为this。

JavaScript：

const sessWeekTemp = document.getElementById('sess_week_temp');
const sessWeekAddNextBefore = sessWeekTemp.nextElementSibling;

let sessTemp = undefined;
let addNextBefore = undefined;

let test = undefined;
for(let i = 0; i < sessions.length; i++){
    if (sessions[i].unitsession_weekno != test) {
        test = sessions[i].unitsession_weekno;
        const sessWeekNoEl = document.importNode(sessWeekTemp.content, true);
        sessWeekNoEl.querySelector('.weekno').textContent = "Week " + sessions[i].unitsession_weekno;
        sessWeekTemp.parentElement.insertBefore(sessWeekNoEl, sessWeekAddNextBefore);
        sessTemp = document.getElementById('sess_temp');
        addNextBefore = sessTemp.nextElementSibling;
    }
   const sessEl = document.importNode(sessTemp.content, true);
   sessEl.querySelector('.sessiontitle').textContent = "Title: " + sessions[i].unitsession_title;
   sessEl.querySelector('.sessiondesc').textContent = "Description: " + sessions[i].unitsession_description;
   sessEl.querySelector('.sessiontype').textContent = "Type: " + sessions[i].unitsession_type;
   sessTemp.parentElement.insertBefore(sessEl, addNextBefore);
}

HTML 如下：

<h2 id="sessions">Sessions</h2>
         <template id="sess_week_temp">
            <p class ="weekno">Week1</p>
            <template id="sess_temp">
                <article class="addsession">
                  <p class="sessiontitle">session title</p>
                  <p class="sessiondesc">session desc</p>
                  <p class="sessiontype">session type</p>
                </article>
             </template>
         </template>

我很久没有使用 JavaScript 了，我还在做很多实验，所以任何帮助/指针都会很棒，谢谢。

Answer 1

请尝试 jquery 模板，例如参考这个link: introduction-to-jquery-templates`

您可能必须根据“TextRow”数组元素创建一个具有所需分组/层次结构的新 json 对象。

Answer 2

首先，TextRow 在数组中间做什么？

对数据进行排序

...通过 unitsession_unit_id 分组。

看起来你真的想分组

• unitsession_unit_id 然后由
• unitsession_weekno 然后由
• unitsession_type

按该顺序对数据进行排序...

let theData = [
{
    unitsession_id: 19,
    unitsession_title: 'Lecture week 1',
    unitsession_description: 'Week 1 lecture',
    unitsession_type: 'Lecture',
    unitsession_weekno: 1,
    unitsession_unit_id: 5
}, // etc.
];

theData.sort((x,y)=> {
  if(x.unitsession_unit_id > y.unitsession_unit_id) return 1;
  if(x.unitsession_unit_id < y.unitsession_unit_id) return -1;

  if(x.unitsession_weekno > y.unitsession_weekno) return 1;
  if(x.unitsession_weekno < y.unitsession_weekno) return -1;

  if(x.unitsession_type > y.unitsession_type) return 1;
  if(x.unitsession_type < y.unitsession_type) return -1;

  return 0;
});