Сортировка строк CSV в массиве, исключая нулевой индекс

Question

У меня есть разделенные запятыми значения в массиве, который я получаю из CSV-файла и использую его для отображения таблицы в React.

[
"Company,Industry,Years,CEO", 
"Tesla,Automobile,15,Elon", 
"SpaceX,AeroSpace,17,Elon", 
"Amazon,Software,24,Jeff", 
"Google,Software,20,Sundar", 
"Microsoft,Software,30,Satya", 
"BMW,Automobile,103,Harald", 
"BlueOrigin,AeroSpace,19,Jeff", 
"NASA,Space,61,Gov", 
"Hyperloop,Transportation,5,Elon"
]

JSX

  renderCsvTable() {
        const { file } = this.state;
        if(file !== "") {
          let data = `<table className="csv-table">`;
          file.forEach((cells, i) => {
            let cell_data = cells.split(',');
            data+= `<tr>`;
            cell_data.forEach((column) => {
              if (i === 0) {
                data+= `<th>${column}</th>`;
              } else {
                data+= `<td>${column}</td>`;
              }
            });
            data+= `</tr>`;
          });
          data+= `</table>`;

          return (
            <div>{ parse(data) }</div>
          )
        }
      }

Я хочу отсортировать массив по отдельным столбцам.

В настоящее время я могу сортировать по первому столбцу, используя метод сортировки

this.state.file.sort((a, b) => (a > b) - (a < b));

Но это также сортировка [0] index массива, который мне не нужен, потому что это заголовок таблицы.

После сортировки

[
"Amazon,Software,20,Jeff", 
"BMW,Automobile,33,Harald", 
"BlueOrigin,Space,4,Jeff", 
"Company,Industry,Years,CEO", 
"Google,Software,30,Sundar", 
"Hyperloop,Transportation,5,Elon", 
"Microsoft,Software,30,Satya", 
"NASA,Space,60,Gov", 
"SpaceX,Space,5,Elon", 
"Tesla,Automobile,10,Elon"
]

Также я хочу отсортировать столбцы, как если бы я нажимал на Годы или Генеральный директор , он должен сортироваться по годам или Генеральному директору. То же самое с каждым столбцом.

Answer 1

Я бы порекомендовал создавать элементы html в функции render().Это даст вам доступ к привязке данных React и синтаксису прослушивания событий, упростит поддержку и повысит производительность больших таблиц.

Это можно сделать, проанализировав данные CSV в объекте и сохранив их в this.state.data.Ключом является заголовок, а значением - точка данных.

this.state.data =[
  {'Company':'Tesla','Industry':'Automobile','Years':'15','CEO':'Elon'},
  {'Company':'SpaceX','Industry':'AeroSpace','Years':'17','CEO':'Elon'},
  {'Company':'NASA','Industry':'Space','Years':'61','CEO':'Gov'}
];

  // on click of table heading and pass the key to sort based on (ex. company)
  sortBy(key) {
    let arrayCopy = [...this.state.data];
    arrayCopy.sort(this.compareBy(key));
    this.setState({data: arrayCopy});
  }


  compareBy(key) {
    return function (a, b) {
      if (a[key] < b[key]) return -1;
      if (a[key] > b[key]) return 1;
      return 0;
    };
  }

Вот мое решение: https://codepen.io/brettdawidowski/pen/drJEjb

Надеюсь, это поможет!

// babel.js

/*
 * Row Component
*/

const Row = (rows) => (
  <tr>
    {
      // Maping the values of Object to HTML <td>
      // **Note: Assuming the Keys/Values will persist in the same order
      Object.values(rows).map((r) => <td>{r}</td>)
    }  
  </tr>
);

/*
  Table Component
*/
class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        // Example Input: 
       // {'Company':'Tesla','Industry':'Automobile','Years':'15','CEO':'Elon'},
       // {'Company':'SpaceX','Industry':'AeroSpace','Years':'17','CEO':'Elon'},
      // {'Company':'NASA','Industry':'Space','Years':'61','CEO':'Gov'}

      ],
      // Add service/ajax call to http GET request to fetch csv from server/back-end
      file: [
      "Company,Industry,Years,CEO", 
      "Tesla,Automobile,15,Elon", 
      "SpaceX,AeroSpace,17,Elon", 
      "Amazon,Software,24,Jeff", 
      "Google,Software,20,Sundar", 
      "Microsoft,Software,30,Satya", 
      "BMW,Automobile,103,Harald", 
      "BlueOrigin,AeroSpace,19,Jeff", 
      "NASA,Space,61,Gov", 
      "Hyperloop,Transportation,5,Elon"
      ]
    };

    this.parseCsv();

    this.compareBy.bind(this);
    this.sortBy.bind(this);
  }

  parseCsv() {
    const { file } = this.state;
    if(file !== "") {

      // set headers from index 0
      let headers = file[0].split(',').map(value => value);

      // temp remove index 0 from For loop
      file.slice(1).forEach((row) => {
        let items = row.split(',');
        let d = {};
        items.forEach((item, index) => {
          // parse Numbers for proper sorting ex. “3” -> 3
          if(/^[0-9]+$/.test(item)) item = parseInt(item)
          // key: Company, value: Tesla
          d[headers[index]] = item;

          // When complete parsing add to state.data
          if(index + 1 === items.length) {
            this.state.data.push(d);
            console.log(JSON.stringify(d));
          }
        })
      })

    }
  }


  compareBy(key) {
    return function (a, b) {
      if (a[key] < b[key]) return -1;
      if (a[key] > b[key]) return 1;
      return 0;
    };
  }

  sortBy(key) {
    let arrayCopy = [...this.state.data];
    arrayCopy.sort(this.compareBy(key));
    this.setState({data: arrayCopy});
  }

  render() {
    const headers = Object.keys(this.state.data[0])
    const rows = this.state.data.map( (rowData) => <Row {...rowData} />);

    return (
      <table>
        <thead>
        <tr>
          {
            headers.map((h) => <th onClick={() => this.sortBy(h)}>{h}</th> )
          }
        </tr>
          </thead>
        <tbody>
          { rows }
        </tbody>
      </table>
    );

  }
}

/*
 * Render Component
 */
ReactDOM.render(<Table />, document.getElementById('app'));

<!-- index.html -->
<div id="app"></div>

Answer 2

Вот как это можно сделать.

1. Сначала преобразовать массив строк в массив массива
2. Затем использовать slice(1), чтобы получить все строки, кроме заголовков
3. применить sort() к строкам, возвращаемым slice(1)
4. Функция show принимает параметр colno.
5. В sort() вы должны сравнить значения в colno
6. Перед возвратом добавьте заголовки arr[0] перед отсортированным массивом.

let arr = [
"Company,Industry,Years,CEO", 
"Tesla,Automobile,15,Elon", 
"SpaceX,AeroSpace,17,Elon", 
"Amazon,Software,24,Jeff", 
"Google,Software,20,Sundar", 
"Microsoft,Software,30,Satya", 
"BMW,Automobile,103,Harald", 
"BlueOrigin,AeroSpace,19,Jeff", 
"NASA,Space,61,Gov", 
"Hyperloop,Transportation,5,Elon"
]
function sort(arr,colno){
  let x = arr.map(x => x.split(',').map(a => Number(a) || a));
  return [x[0]].concat(x.slice(1).sort((a,b) => {
    if(typeof a[colno] === 'number'){
      return a[colno] - b[colno];
    }
    else return a[colno].localeCompare(b[colno]);
  })).map(x => x.join(','))
  
}
console.log(sort(arr,1))