Question

     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.log(res);
                    console.log(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.log(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>
           );
         }
        }

我正在以以下格式获取表数据。

Response format 从这种格式，我试图以表格格式加载数据。我可以获取标题，但数据没有填充。

我在下面得到输出

output which i am getting。

但是如何从我得到的响应中从chart_data键获取正确的数据。

我可以知道我在这里做错了吗。

Answer 1

只返回chart_data，因为您的响应已经是ag-grid行格式。

tableData() { 
  return res.chart_data;
}

无法将数据加载到Ag-Grid组件中

1 个答案: