Question

我正在尝试对JSON数据进行分组，以便同一“部门”中的所有人员都在一个对象中。然后，我想对数据进行映射，以便将其显示在网页上。

此刻，我收到错误消息“无法读取未定义的地图属性”

我的JSON数据：

people:[  
  {  
     id:"a0bef",
     title:"cleaner",
     department:"facilities",

  },
  {  
     id:"a0beg",
     title:"maintenance",
     department:"facilities",

  },
  {  
     id:"a0beh",
     title:"cleaner",
     department:"facilities",

  },
  {  
     id:"a0bei",
     title:"chef",
     department:"kitchen",

  },
  {  
     id:"a0bej",
     title:"waitress",
     department:"kitchen",

  }
]

我想要的样子：

people:[  
  "facilities":[  
     {  
        id:"a0bef",
        title:"cleaner"
     },
     {  
        id:"a0beg",
        title:"maintenance"
     },
     {  
        id:"a0beh",
        title:"cleaner"
     }
  ],
  "kitchen":[  
     {  
        id:"a0bei",
        title:"chef"
     },
     {  
        id:"a0bej",
        title:"waitress"
     }
  ]
]

这是我尝试过的：

import React from 'react'
import _ from 'lodash'

class PeopleList extends React.Component {
  constructor (props) {
    super(props)
  }

  render () {
    const { peoplelist } = this.props
    const people = _.groupBy(peoplelist, 'department')
    return (
      <div>
        { Object.people.map(function (person, key) {
          return (
            <div className='row' key={key}>
              <div className='col-md-6'>{person.department}</div>
              <div className='col-md-4'>{person.title}</div>
            </div>
          )
        }) }
      </div>
    )
  }
}



export default PeopleList

Answer 1

此刻，我收到错误消息“无法读取地图属性未定义”

这是由于您的return语句{ Object.people.map(function (person, key)

中的这一行

const people = _.groupBy(peoplelist, 'department')

在上面，您将得到2个数组的对象，即facilities和kitchen。

因此，您可以执行以下操作来显示数据。

Object.values(people).map(dept => {
  dept.map((person, key) => {
    return (
      <div className='row' key={key}>
        <div className='col-md-6'>{person.department}</div>
        <div className='col-md-4'>{person.title}</div>
      </div>
    )
  })
})

Answer 2

由于Object.people is not a valid syntax，您收到此错误。

people之后的

const people = _.groupBy(peoplelist, 'department')将是一个对象。您需要获取对象的所有值（using Object.values(people)）;这会给你各种各样的人。然后，通过该数组进行映射以获得所需的输出。

该功能将修改为

Object.values(people).map(function (deptArray) { 
    return deptArray.map(function (person) {
      return (
        <div className='row' key={some-unique-key}>
          <div className='col-md-6'>{person.department}</div>
          <div className='col-md-4'>{person.title}</div>
        </div>
      )            
    })
})

注意：在上述情况下，您将无法使用数组索引作为键，因为键将重复出现（因此，我已将其从解决方案中删除了。） / p>

希望有帮助。还原任何澄清/疑问。

Answer 3

如果要按部门将项目分组，然后显示按部门订购的人员列表，则需要映射两次。一次过部门，然后一次过每个部门中的每个人。

要遍历部门，您将需要使用Object.values()或Object.entries()。

以下是使用reduce()来实现groupBy的示例：

const people = [
  { id: "a0bef", title: "cleaner", department: "facilities" },
  { id: "a0beg", title: "maintenance", department: "facilities" },
  { id: "a0beh", title: "cleaner", department: "facilities" },
  { id: "a0bei", title: "chef", department: "kitchen" },
  { id: "a0bej", title: "waitress", department: "kitchen" }
]

function groupBy(data, key) {
  return data.reduce((acc, x) => {
    acc[x[key]] = [...(acc[x[key]] || []), x];
    return acc;
  }, {});
}

class PeopleList extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const people = groupBy(this.props.people, 'department')
    return (
      <div className='container'>
        {Object.entries(people).map(([dep, staff]) => {
          return (
            <div className='dep' key={dep}>
              <span className='dep-name'>{dep}</span>
              {staff.map(person => {
                return (
                  <div className='row' key={person.id}>
                    <div className='col-xs-6'>Dep: {person.department}</div>
                    <div className='col-xs-4'>Title: {person.title}</div>
                  </div>
                )
              })}
            </div>
          )
        })}
      </div>
    )
  }
}

ReactDOM.render(
  <PeopleList people={people} />,
  document.getElementById('root')
);

.dep {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}
.dep-name {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<div id="root"></div>

groupBy JSON数据然后映射到React组件中

3 个答案: