React - заполнение данных для таблицы с заголовком строки и заголовка столбца - PullRequest
Новая
       9

React - заполнение данных для таблицы с заголовком строки и заголовка столбца

0 голосов
/ 17 ноября 2018

Мне нужно построить и заполнить таблицу с заголовком строки и столбца.Примерно так: 

<table>
  <tr>
    <th></th>
    <th scope="col">January</th>
    <th scope="col">February</th>
  </tr>
  <tr>
    <td>1</td>
    <td>$100</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>2</td>
    <td>$90</td>
    <td>$80</td>
  </tr>
</table>

Данные, которые я получаю от API, имеют формат: 

{
    item: '1',
    month: 'January',
    res:0,
    savings: 100
  },
  {
    item: '1',
    month: 'February',
    res: 0,
    savings: 80,
  },
  {
    item: '2',
    month: 'January',
    savings: 90,
  },
  {
    item: '2',
    month: 'February',
    res: 0
    savings: 80
  },

Вот что я пробовал: 

render() {
const contents = data[0].groupDetail.values.map(testData => {
      return <tr>
        <td>{testData.item}</td>
        <td>{testData.month}</td>
        <td>{testData.savings}</td>
      </tr>
    })
return(
<table>
              <tr>
                 <th></th>
        <th scope="col">January</th>
        <th scope="col">February</th>
              </tr>

                {contents}
</table>
)}

Я не уверенкак преобразовать эти данные для заполнения таблицы.Я попробовал .map, и каждый элемент появился дважды.Кто-нибудь может помочь с подходом здесь?Спасибо !!

ОБНОВЛЕНИЕ: Вот что у меня сейчас: 

const grouped = _.groupBy(data[0].groupDetail.values, data => data.item);

let result = Object.keys(grouped).map(key => {
      return (
        <tr>
          <td>
            {key}
          </td>
          {Object.keys(grouped[key]).map(itemText => {
            return (
              <td>
                {grouped[key][itemText]['fieldName']}
              </td>
            )
          })}
        </tr>
      );
    });

1 Ответ

0 голосов
/ 17 ноября 2018

Это должно работать =) 

const items = [{
    item: '1',
    month: 'January',
    savings: 100,
  },
  {
    item: '1',
    month: 'February',
    savings: 80,
  },
  {
    item: '2',
    month: 'January',
    savings: 90,
  },
  {
    item: '2',
    month: 'February',
    savings: 80,
  }
];

const groupBy = (objectArray, property) => {
  return objectArray.reduce(function(acc, obj) {
    const key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

const groupedItems = groupBy(items, 'item');

  return (
    <table>
      <tr>
        <th></th>
        <th scope="col">January</th>
        <th scope="col">February</th>
      </tr>
      {Object.keys(groupedItems).map(item => (
          <tr>
            <td>{item}</td>
              {groupedItems[item].map(item => (
                <td>{item.savings}</td>
              ))}
          </tr>
      ))}
    </table>
  )
...