Question

嘿，我在数据库中有这张桌子

st_ID    firstName    LastName  Classes
  1         paul       adams      php
  1         paul      adams       javascript
  1         paul      adams       ASP
  2        Georges    wayne       PHP

所以我想得到这个结果：

<table>
  <thead>
    <tr>
      <td>FirstName</td>
      <td>LastName</td>
      <td>Classes</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>paul</td>
      <td>adams</td>
      <td>php, javascript,Asp</td>
    </tr>
  </tbody>
<table>

所以我使用了react的map函数

renderTable(testValue) {
  let arrayValue = [];
  let arrayID = '';

  map(testValue,  (x) => {
    if (!arrayID){
      arrayID = x.st_ID
    }
    else{
      if (arrayID === x.st_ID){
        // here iw ant to show all classes with same st_ID
      }
      else{
        // here i want to show classes of next st_ID
      }
    }
  })
}

任何帮助将不胜感激。

Answer 1

您将需要按照以下方式对对象进行分组

var helper = {};
var result = arr.reduce(function(r, o) {
  var key = o.FirstName + '-' + o.LastName;

  if(!helper[key]) {
    helper[key] = Object.assign({}, o); // create a copy of o
    r.push(helper[key]);
  } else {
    helper[key].ClassName +=","+ o.ClassName;
  }

  return r;
}, []);

我们将连续检查现有键并将其推入我们的辅助对象。其中，类名用逗号分隔。

例如选中此link

Answer 2

请尝试此解决方案，希望获得帮助...

    let testValue = [
      {
        st_ID: 1,
        firstName: 'paul',
        LastName: 'adams',
        Classes: 'php'
      },
      {
        st_ID: 1,
        firstName: 'paul',
        LastName: 'adams',
        Classes: 'JS'
      },
      {
        st_ID: 1,
        firstName: 'paul',
        LastName: 'adams',
        Classes: 'ASP'
      },
      {
        st_ID: 2,
        firstName: 'Georges',
        LastName: 'wayne',
        Classes: 'php'
      }
    ]
    
    
    let data = [];
    Array.from(new Set(testValue.map(obj => obj.st_ID))).forEach(id => {
      let isFirstTime:boolean = true;

      testValue.filter((el) => {
        return (el.st_ID == id)
      }).forEach(obj => {

        // check first !
        if (isFirstTime) {
          data.push(obj);
          isFirstTime = false;
        }else {
          data[data.length -1].Classes += ',' + obj.Classes;
        }
      });

    });
    console.log(data);

Answer 3

由于数据的组织方式，我建议先对其进行迭代，以便有一个更好的映射结构。

在此示例中，假设您从数据库中提取数据后，其数据如下所示。

const databaseData = [
  {
    st_ID: 1,
    firstName: 'paul',
    lastName: 'adams',
    classes: 'php'
  }, {
    st_ID: 1,
    firstName: 'paul',
    lastName: 'adams',
    classes: 'JS'
  }
]

第一次迭代：将每个技能分配给个人。一种实现方法是使用.reduce数组函数。

const combineClasses = data.reduce((collect, {st_ID, firstName, lastName, classes}) => {
  if (collect[st_ID]) {
    classes = [...collect[st_ID].classes, classes]
    return {...collect, [st_ID]: {...collect[st_ID], classes}}
  } else {
    return {...collect, [st_ID]: {firstName, lastName, classes: [classes]}}
  }
}, {});

代码在做什么？

遍历数据中的每个项目
如果存在个人，则将类中的值添加到对象的对象数组中。
如果不是，则在对象中添加id作为键，并在数组中添加名字，姓氏和类。

第二次迭代：现在您已经组织了数据，并且每个人都列出了技能，这将使映射起来容易得多。例如。

<tbody>
  { Object.keys(combineClasses).map((key) => {
    return (
      <tr>
        <td>{combineClasses[key].firstName}</td>
        <td>{combineClasses[key].lastName}</td>
        <td>{combineClasses[key].classes.join(', ')}</td>
      </tr>
    );
  })}
</tbody>

很显然，您将需要代码来显示完整表并包含标题。您将在下面找到一个有效的示例。 https://codepen.io/roycode/pen/vaGoGR?editors=0010

地图搜索在数组内做出反应

3 个答案: