Блог

Главная - Вопросы по программированию - ReactJS: Выборка: разбор json на несколько объектов

ReactJS: Выборка: разбор json на несколько объектов

#json #reactjs #ag-grid-react

#json #reactjs #ag-grid-реагировать

Вопрос:

Я разработчик .NET, создающий свое первое приложение ReactJS / AgGrid, и у меня есть ВЕБ-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. Вы на правильном пути. Продолжайте. Ваше состояние — это сам объект. Таким образом, вы можете сделать smt следующим образом .setState({obj1: value, obj2: value, obj3: value })

2. .затем(результат => result.json()) .затем(rowData =>{ // творите здесь свою магию … this.setState({rowData :updatedRowData}}))

3. при желании вы можете уничтожить свой ответ в разных объектах, а затем установить свое состояние. Посмотрите здесь wesbos.com/destructuring-objects

Ответ №1:

Что ж, похоже, ответ таков:

 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 в целом — мне чужды)