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
    }
]

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

第1周：

讲座第1周

实践1

第2周：

讲座第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;
});

如何通过分组

2 个答案: