ReactJS: Fetch: анализ json на несколько объектов - PullRequest
Новая
       21

ReactJS: Fetch: анализ json на несколько объектов

0 голосов
/ 09 апреля 2019

Я - разработчик .NET, создающий мое первое приложение ReactJS / AgGrid, и у меня есть WEB API, возвращающий JSON на основе следующего: 

public class CarbonCostsView
{
    public DateTime TradeDate { get; set; }
    public Int16 HourEnding { get; set; }
    public List<CarbonCosts> CarbonCosts { get; set; }
}

Я пытаюсь проанализировать возвращенный JSON втри объекта, но не знаю, как.В конечном итоге, первые два элемента (TradeDate & HourEnding) будут объединены в сообщение заголовка.

JSON выглядит так: 

{  
   "tradeDate":"2019-04-02T00:00:00",
   "hourEnding":5,
   "carbonCosts":[  
      {  
         "id":101,
         "displayName":"Delta 1X0",
         "tradeDate":"2019-04-02T00:00:00",
         "hourEnding":5,
         "manMin":10.410000,
         "base":7.380000,
         "db":null,
         "pag":null
      },
      {  
         "id":102,
         "displayName":"Delta 1X1",
         "tradeDate":"2019-04-02T00:00:00",
         "hourEnding":5,
         "manMin":7.120000,
         "base":5.230000,
         "db":null,
         "pag":null
      }
  ]
}

А вот JS, представляющий ReactJS / AgGrid. 

const columnDefs = [
    { headerName: "Plant", field: "plantName", width: 120, rowGroup: true, sortable: true, filter: true },
    { headerName: "Man Min", field: "manMin", width: 80 },
    { headerName: "Base", field: "base", width: 100 },
    { headerName: "+DB", field: "db", width: 100 },
    { headerName: "+PAG", field: "pag", width: 100 },
    { headerName: "+RA", field: "ra", width: 100 },
];

class App extends Component {
    constructor() {
        super();

        this.state = {
            columnDefs: columnDefs,
            header: {}
        }
    }
    componentDidMount() {
        fetch('http://localhost:53884/api/OperationalCosts')
            .then(result => result.json())
            .then(rowData => this.setState({ rowData }))
    }

    render() {
        console.log(this.state.rowData);
        return (
            <div
                className="ag-theme-balham"
                style={{
                    height: '700px',
                    width: '1000px'
                }}
            >
                <h1> Carbon Costs</h1>

                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    rowData={this.state.rowData}>
                </AgGridReact>
            </div>
        );
    }
}

Я подозреваю, что "магия", которую я ищу, происходит здесь?Что где-то в этом разделе я могу разбить JSON на три отдельных объекта? 

.then(result => result.json())
.then(rowData => this.setState({ rowData }))

1 Ответ

0 голосов
/ 09 апреля 2019

Ну, похоже, ответ: 

class App extends Component {
    constructor() {
        super();

        this.state = {
            columnDefs: columnDefs,
            header: {}
        }
    }
    componentDidMount() {
        fetch('http://localhost:53884/api/OperationalCosts')
            .then(result => result.json())
            .then(foobar => this.setState(
               { TradeDate: foobar.TradeDate,
                 HourEnding: foobar.HourEnding,
                 CarbonCosts: foobar.carbonCosts }))
    }

    render() {
        return (
            <div
                className="ag-theme-balham"
                style={{
                    height: '700px',
                    width: '1000px'
                }}
            >
                <h1> Carbon Costs</h1>

                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    rowData={this.state.CarbonCosts}>
                </AgGridReact>
            </div>
        );
    }
}

Спасибо, что подтолкнули меня в правильном направлении.

(Все еще чувствует себя очень неловко: ReactJS - и JS в целом - мне чужды)

...