Реагировать на таблицу с сопоставлениями из / в

Question

Я пытаюсь создать таблицу в React, которая динамически создается с массивом сопоставлений словаря.У каждого словаря есть ключи id, old, new и support.Старый описывает запись слева.Новый описывает заголовок вверху.Поддержка - это значение, которое появляется на пересечении обоих: либо Y, либо N. Проблема в том, что в большинстве примеров, которые я видел, используются фиксированные заголовки, которые появляются в каждом элементе, тогда как это не всегда так.Я также хотел бы отсортировать по возрастанию номера версии.Есть ли способ достичь этого, когда заголовки являются динамическими и не обязательно появляются в каждом элементе.

const example = {"old": "3.0.10", "new": "3.5.1", "support": "Y"};

Answer 1

Посмотрите, подходит ли это вам.

https://codesandbox.io/s/sparkling-water-y49ih

SNIPPET (с тем же кодом, что и в CodeSandbox):

function App() {
  const example = [
    { old: "3.0.10", new: "3.5.1", support: "Y" },
    { old: "3.0.10", new: "3.5.2", support: "Y" },
    { old: "3.0.10", new: "3.5.3", support: "Y" },
    { old: "3.0.10", new: "3.6.1", support: "N" },
    { old: "3.0.10", new: "3.6.2", support: "Y" },
    { old: "3.0.10", new: "3.7.0", support: "Y" },

    { old: "3.5.1", new: "3.5.2", support: "Y" },
    { old: "3.5.1", new: "3.5.3", support: "Y" },
    { old: "3.5.1", new: "3.6.1", support: "Y" },
    { old: "3.5.1", new: "3.6.2", support: "Y" },
    { old: "3.5.1", new: "3.7.0", support: "Y" },

    { old: "3.5.2", new: "3.5.3", support: "N" },
    { old: "3.5.2", new: "3.6.1", support: "Y" },
    { old: "3.5.2", new: "3.6.2", support: "Y" },
    { old: "3.5.2", new: "3.7.0", support: "Y" },

    { old: "3.5.3", new: "3.6.1", support: "Y" },
    { old: "3.5.3", new: "3.6.2", support: "N" },
    { old: "3.5.3", new: "3.7.0", support: "Y" },

    { old: "3.6.1", new: "3.6.2", support: "Y" },
    { old: "3.6.1", new: "3.7.0", support: "Y" },

    { old: "3.6.2", new: "3.7.0", support: "Y" }
  ];

  // GETTING ROWS EXCLUSIVE VALUES ('old' PROPERTY)
  // STORING INTO rowItems ARRAY AND SORTING ALPHABETICALLY
  let rowItems = [];

  example.forEach(item => {
    if (rowItems.indexOf(item.old) === -1) {
      rowItems.push(item.old);
    }
  });

  rowItems = rowItems.sort();

  // DO THE SAME FOR THE HEADER ITEMS ('new' PROPERTY)

  let headerItems = [];

  example.forEach(item => {
    if (headerItems.indexOf(item.new) === -1) {
      headerItems.push(item.new);
    }
  });

  headerItems = headerItems.sort();

  // NOW WE WILL SEPARATE THE OBJECTS INTO DIFFERENT ARRAYS
  // EACH ARRAY WILL GROUP EVERY OBJECT WITH THE SAME 'old' PROPERTY VALUE
  // THE ARRAYS WILL BE STORED INTO THE NESTED OBJECT separateRowObjects
  // EACH ARRAY WILL BE STORED UNDER ITS CORRESPONDING 'old' KEY

  /* 

    separateRowObjects {
      3.5.1 : [array with all the objects with 'old' === 3.5.1],
      3.5.2 : [array with all the objects with 'old' === 3.5.2],
      and so on...
    }

  */
  const separateRowObjects = {};

  // Initialize arrays for each property
  rowItems.forEach(row => (separateRowObjects[row] = []));

  rowItems.forEach(row => {
    for (let i = 0; i < example.length; i++) {
      if (example[i].old === row) {
        separateRowObjects[row].push(example[i]);
      }
    }
  });

  // GENERATING THE 1ST ROW WITH THE HEADERS
  const tableHeaderItems = headerItems.map(item => <th key={item}>{item}</th>);

  // FUNCTIONS TO MAP ROW AND HEADER AND RETURN THE 'support' VALUE
  function getObject(row, header) {
    const aux = separateRowObjects[row].filter(item => item.new === header);
    if (aux.length > 0) {
      return aux[0].support;
    } else {
      return "";
    }
  }

  // AUXILIAR FUNCTION TO GENERATE THE <td>'s FOR THE 'support' VALUES
  function createTds(rowItem) {
    let tdArray = [];
    for (let i = 0; i < headerItems.length; i++) {
      tdArray.push(<td key={i}>{getObject(rowItem, headerItems[i])}</td>);
    }
    return tdArray;
  }

  // FUNCTION TO GENERATE THE TABLE ROWS <tr>
  const tableRowItems = rowItems.map(item => (
    <tr key={item}>
      <td>{item}</td>
      {createTds(item)}
    </tr>
  ));

  return (
    <React.Fragment>
      <table>
        <tr>
          <th>From/To</th>
          {tableHeaderItems}
        </tr>
        {tableRowItems}
      </table>
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

th {
  width: 50px;
}

td {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"/>

Answer 2

Вы пробовали это?Я предположил, что ваш массив значений хранится в values

    const rows = uniq(values.map(v => v.from))
    rows.sort()
    const columns = uniq(values.map(v => v.to))
    columns.sort()

    return (
        <table>
            <thead>
                <tr>
                    <th>FROM/TO</th>
                    {columns.map(column => (
                        <th key={column}>{column}</th>
                    ))}
                </tr>
            </thead>
            <tbody>
                {rows.map(row => {
                    const items = columns.map(col => {
                        const value = values.find(v => v.from === row && v.column === col)
                        if (value) return value.support
                        else return ''
                    })
                    return (
                        <tr>
                            <th>{row}</th>
                            {items.map((item, i) => (
                                <td key={columns[i]}>{item}</td>
                            ))} 
                        </tr>
                    )
                })}
            </tbody>
        </table>
    )