Показать и отобразить объект JSON в таблице ReactJs

Question

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

От конечной точки NodeJS яудалось получить 2 объекта:

Поля

"fields": [
{
  "COLUMN_NAME": "quizID"
},
{
  "COLUMN_NAME": "question"
},
{
  "COLUMN_NAME": "choice1"
},
{
  "COLUMN_NAME": "choice2"
},
{
  "COLUMN_NAME": "choice3"
},
{
  "COLUMN_NAME": "choice4"
},
{
  "COLUMN_NAME": "answer"
}

],

и содержимое таблицы

"isi": [
{
  "quizID": 1,
  "question": "Pertanyaan",
  "choice1": "Pilihan1",
  "choice2": "Pilihan2",
  "choice3": "Pilihan3",
  "choice4": "Pilihan4",
  "answer": "Jawaban"
},
{
  "quizID": 2,
  "question": "Pertanyaan",
  "choice1": "Pilihan1",
  "choice2": "Pilihan2",
  "choice3": "Pilihan3",
  "choice4": "Pilihan4",
  "answer": "Jawaban"
}, so on--

У меня естьТакже удалось установить оба объекта в узле и извлечь из реагировать как один объект.Вот скрипт извлечения

componentDidMount() {
    let self = this;
    fetch('http://localhost:5000' + par, { 
        method: 'GET'
    }).then(function (response) {
        if (response.status >= 400) {
            throw new Error("Bad response from server");
        }
        return response.json();
    }).then(function (data) {
        self.setState({ dataTabel: data.fields }); //settings the fetched data to state
        self.setState({ columnTabel: data.isi });

        console.log(self.state.dataTabel)
        console.log(self.state.columnTabel)
    }).catch(err => {
        console.log('caught it!', err);
    })
}

Я вызываю компонент таблицы React внутри render () с состояниями dataTabel и columnTabel в качестве реквизитов, но в таблице не будут отображаться никакие данные.Я пытался использовать функцию карты, но не смог заставить ее работать.

Любая помощь будет оценена.

Answer 1

Проблема в объекте столбцов. Согласно документации , вам необходимо предоставить столбцы в массиве объектов в следующем формате:

const columns = [{
    Header: 'Name',
    accessor: 'name' // String-based value accessors!
}, {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
}]

Чтобы все заработало, вам нужно сформировать данные в следующем формате:

const columns = [
{
    Header: "quizID",
    accessor: "quizID"
},
{
    Header: "question",
    accessor: "question"
},
{
    Header: "choice1",
    accessor: "choice1"
},
{
    Header: "choice2",
    accessor: "choice2"
},
{
    Header: "choice3",
    accessor: "choice3"
},
{
    Header: "choice4",
    accessor: "choice4"
},
{
    Header: "answer",
    accessor: "answer"
}
];

Вам также потребуется вызвать компонент ReactTable, передавая данные и столбцы следующим образом: <ReactTable data={data} columns={columns} />.

ЗДЕСЬ Вы можете найти полное рабочее решение.