Затем данные groupBy json отображаются в компонент React - PullRequest
Новая
       1

Затем данные groupBy json отображаются в компонент React

0 голосов
/ 02 апреля 2019

Я пытаюсь сгруппировать свои данные JSON, чтобы все сотрудники в одном и том же «отделе» были в одном объекте.Затем я хочу отобразить данные, чтобы отобразить их на своей веб-странице.

В настоящее время я получаю сообщение об ошибке "не могу прочитать свойство карты undefined"

мои данные 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

Ответы [ 3 ]

1 голос
/ 02 апреля 2019

Вы получаете эту ошибку, потому что 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>
      )            
    })
})

Примечание: В приведенном выше случае вы не сможете использовать индексы массива в качестве ключа, поскольку ключибудет повторяться (и поэтому я удалил его из своего решения).

Надеюсь, это поможет.Возврат для любых уточнений / сомнений.

1 голос
/ 02 апреля 2019

Если вы хотите сгруппировать ваши предметы по отделам, а затем отобразить список лиц, заказанных по отделам, то вам нужно сопоставить дважды. Один раз за отделы, а затем один раз за каждого человека в каждом отделе.

Для итерации по отделам вам нужно будет использовать Object.values ​​() или Object.entries () .

Вот пример использования redu () для реализации 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>
1 голос
/ 02 апреля 2019

В настоящее время я получаю сообщение об ошибке 'не могу прочитать свойство карты не определено '

Это связано с этой строкой в ​​выписке { 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>
    )
  })
})
...