时间戳

首页 > 解决方案 > 按数据字段分组

reactjs - 按数据字段分组

问题描述

我有一个列表组件包含 SUBJECT、NO、DESCRIPTION 字段。例如：ACC 121, descr.., ACC 121 descr..., ACC 122 descr... ACC 211 desc.... 如何在子组件的tag和description中按相同的SUBJECT和NO分组？

Courses=[{id:1, SUBJECT: ACC, NO:121,DESCR: 'class description1'}, 
         {id:2, SUBJECT:ACC, NO:121, DESCR:'class description2'},
          ...]  

const CourseList=({Courses, onCourseSelect})=>{

const renderedList= Courses.map(course=>{
    return (
    //add <h2>{course.SUBJECT} {course.NO} ???
    <CourseItem key={course.ID} descr={course.DESCR} onCourseSelect={onCourseSelect}  ></CourseItem>
    );
})
return <div className="List ui relaxed divided list">

{renderedList}</div>

}

-----编辑代码

var _ = require('lodash');
const CourseList=({Courses, onCourseSelect})=>{
let renderedList = _.groupBy(Courses,  'SUBJECT','NO');
 console.log(renderedList);

对象列表如下：

ACC: (26) […]
0: Object { ID: 1079, DESCR: "class description1", … }
1: Object { ID: 1080, DESCR: "class description2",  … }
2: Object { ID: 1081, DESCR: "class description3",...}

​​<br> 如何渲染每个物体？我试过了：

return <div>
 {Object.keys(renderedList).map(key => (
{renderedList["SUBJECT"]}
 </div>

但它不起作用。谢谢。

标签： reactjs

解决方案

想法是做这样的事情。创建一个辅助函数，通过对数据进行分组来将数据重组为多维数组，以便多维数组中的每个数组都保存有关具有相同 id 的课程的记录。然后遍历多维数组并执行您想要的任何逻辑。

let courses=[{id:1, SUBJECT: "ACC", NO:121,DESCR: 'class description1'}, 
         {id:2, SUBJECT:"ACC", NO:121, DESCR:'class description2'},
        ...]  


//Where ever we want to print the first group we just need to call the CourseList with a single input from the multidimentional structured array asonst 

CourseList=(courses, onCourseSelect)=>{
//create another variable to hold the structured data
//this ensures that each key in the array is it self another array holding all the courses with that same id.
let structuredData = new Array();
 courses.map(course =>  structuredData[course.id] = (courses.filter(co =>(co.id == course.id ))))
  <div className="List ui relaxed divided list">
    structuredData.map((data, k) => {
      //each iteration over data is printing for a single group
      console.log("Group", k)
      data.map(course=>
        <CourseItem key={course.id} descr={course.DESCR} onCourseSelect={onCourseSelect}  />
      )
    })
 </div>
}

推荐阅读