import React, { Component } from 'react';
import {AgGridReact} from "ag-grid-react";
import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/theme-blue.css";
export default class TableComponent extends Component {
constructor(props) {
super(props);
this.state = {
};
}
createHeader(){
let columns = this.props.data.columns.map((col) => {
return {headerName:col.toUpperCase(),field:col}
});
return columns;
}
tableData(){
var res = this.props.data.columns;
var columns_name = res.map((col) => {
return col
});
console.info(res);
console.info(columns_name);
var temp =[];
for(var i =1; i< res[0].length;i++){
var draft = {};
for(var j =0; j< columns_name.length; j++){
draft[columns_name[j]] = '';
}
temp.push(draft);
}
console.info(temp);
for(var i =0; i< columns_name.length; i++){
for(var j =0; j<temp.length; j++){
temp[j][columns_name[i]] = res[i][j+1];
}
}
return temp;
}
render() {
return (
<div style = {containerStyle} className = "ag-blue">
<AgGridReact
columnDefs = {this.createHeader()}
rowData = {this.tableData()}
enableFilter
enableSorting>
</AgGridReact>
</div>
);
}
}
Я получаю данные таблицы в следующем формате.
Формат ответа Из этого формата я пытаюсь загрузить данные в табличном формате. Я могу получить заголовки, но данные не заполняются.
Я получаю результат ниже
Но как получить правильные данные из ключа chart_data из ответа, который я получаю.
Могу ли я знать, что я здесь делаю не так?
Да супер. Я получил ожидаемый результат, чего я ожидал



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Просто верните chart_data, потому что ваш ответ уже в формате строки ag-grid.
tableData() {
return res.chart_data;
}
назначьте res.chart_data для rowData. нет необходимости изменять ответ. вот так tableData () {вернуть res.chart_data; };