Я хочу получить Pcr1 и Pcr2 в теле таблицы, используя react js

#reactjs

#реагирует на

Вопрос:

Я хочу получить pcr1 и 2 в теле таблицы, я пытался, но не смог получить данные, пожалуйста, помогите новичку отреагировать, в настоящее время я пытаюсь создать таблицу данных с данными из API. Я хочу сначала запустить pcr1 в своей таблице, а затем запустить другую с таблицей ответов pcr2.

Вот Мой Код:

 import React, { Component } from "react";  import ReactDOM from "react-dom";  import ColumnResizer from "column-resizer";  import "./table.css"  import axios from "axios";          // https://api.github.com/users  // http://localhost:8080/AmpRestAPI/webresources/getPCRList/all  class ReactTable extends Component {  constructor(props) {  super(props);  this.tableSelector = "#somethingUnique";  this.state = {  api: []  }    }    componentDidMount() {  // fetch('https://api.github.com/users').then(res =gt; res.json().then(result =gt; {  // console.log(result); this.setState({ api: result });  // }))    axios.get('/AmpRestAPI/webresources/getPCRList/all',  {  headers: {  'Access-Control-Allow-Origin': '*',  },  auth: {  username:   password:   }  }).then(response =gt; {  console.log(response);  this.setState({ api: response.data.results });    }).catch(function (error) {  console.log(error.response);  });    if (this.props.resizable) {  this.enableResize();  }  }    componentWillUnmount() {  if (this.props.resizable) {  this.disableResize();  }  }    componentDidUpdate() {  if (this.props.resizable) {  this.enableResize();    }  }    componentWillUpdate() {  if (this.props.resizable) {  this.disableResize();  }  }    enableResize() {  const options = this.props.resizerOptions;  if (!this.resizer) {  this.resizer = new ColumnResizer(  ReactDOM.findDOMNode(this).querySelector(`${this.tableSelector}`),  options    );  } else {  this.resizer.reset(options);  }  }    disableResize() {  if (this.resizer) {  this.resizer.reset({ disable: true });  }  }        render() {    return (  lt;divgt;  lt;div className="container-fluid example pt-3" gt;    lt;table id="somethingUnique" cellSpacing="0" className="border-primary" style={{ fontSize: "100%" }}gt;  lt;theadgt;  lt;trgt;  lt;thgt;lt;svg  width="100%"  height="100%"  viewBox="0 0 500 75"  preserveAspectRatio="xMinYMid meet"  gt;lt;text  x="50"  y="75%"  fontSize="75"  gt;Thumbnaillt;/textgt;  lt;/svggt;lt;/thgt;  lt;th gt;lt;svg  width="100%"  height="100%"  viewBox="0 0 500 75"  preserveAspectRatio="xMinYMid meet"  gt;lt;text  x="0"  y="75%"  fontSize="75"  gt;Clip Namelt;/textgt;  lt;/svggt;lt;/thgt;  lt;thgt;lt;svg  width="100%"  height="100%"  viewBox="0 0 500 75"  preserveAspectRatio="xMinYMid meet"  gt;lt;text  x="50"  y="75%"  fontSize="75"  fill="black"  gt;Slog Namelt;/textgt;  lt;/svggt;lt;/thgt;  lt;thgt;lt;svg  width="100%"  height="100%"  viewBox="0 0 500 75"  preserveAspectRatio="xMinYMid meet"  gt;lt;text  x="20"  y="75%"  fontSize="75"  fill="black"  gt;Channel Namelt;/textgt;  lt;/svggt;lt;/thgt;  lt;thgt;lt;svg  width="100%"  height="100%"  viewBox="0 0 500 75"  preserveAspectRatio="xMinYMid meet"  gt;lt;text  x="50"  y="75%"  fontSize="75"  fill="black"  gt;Statuslt;/textgt;  lt;/svggt;lt;/thgt;  lt;thgt;lt;svg  width="100%"  height="100%"  viewBox="0 0 500 75"  preserveAspectRatio="xMinYMid meet"  gt;lt;text  x="50"  y="75%"  fontSize="75"  fill="black"  gt;Looplt;/textgt;  lt;/svggt;lt;/thgt;  lt;thgt;lt;svg  width="100%"  height="100%"  viewBox="0 0 500 75"  preserveAspectRatio="xMinYMid meet"  gt;lt;text  x="50"  y="75%"  fontSize="75"  fill="black"  gt;Start Timelt;/textgt;  lt;/svggt;lt;/thgt;  lt;thgt;lt;svg  width="100%"  height="100%"  viewBox="0 0 500 75"  preserveAspectRatio="xMinYMid meet"  gt;lt;text  x="50"  y="75%"  fontSize="75"  fill="black"  gt;Durationlt;/textgt;  lt;/svggt;lt;/thgt;  lt;thgt;lt;svg  width="100%"  height="100%"  viewBox="0 0 500 75"  preserveAspectRatio="xMinYMid meet"  gt;lt;text  x="35"  y="75%"  fontSize="75"  fill="black"  gt;Down Counterlt;/textgt;  lt;/svggt;lt;/thgt;  lt;thgt;lt;svg  width="100%"  height="100%"  viewBox="0 0 500 75"  preserveAspectRatio="xMinYMid meet"  gt;lt;text  x="50"  y="75%"  fontSize="75"  fill="black"  gt;Up Counterlt;/textgt;  lt;/svggt;lt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  { this.state.api ?  this.state.api.map(item =gt; {      }) : null  }  lt;/tbodygt;    lt;/tablegt;    lt;/div gt;  lt;/divgt;  );  }  }    export default ReactTable;  

файл json

Как я могу выполнить этот вложенный запрос на извлечение?

Большое спасибо, как я могу выполнить этот вложенный запрос на извлечение?

Большое спасибо,

Комментарии:

1. Я не уверен, что понимаю. Я вижу только одну таблицу и один вызов API ( /AmpRestAPI/webresources/getPCRList/all )

2. { «PCR2»: [ { «Загруженный клип»: «Клип 0», «Тип ногтя»: «jpeg», «Время начала»: «:00:00» } ] «PCR1»: [ { «Загруженный клип»: «Клип 0», «Тип ногтя»: «jpeg», «Время начала»: «00:00», «Продолжительность»: «10:04»} ] } я хочу отобразить этот api данных в таблице

3. Я понимаю. Но в своем коде вы задаете переменную состояния api , как response.data.results в то время как в JSON ее нет results . Есть RPC1 и RPC1 такие . В любом случае, если вы хотите объединить их в один массив для заполнения таблицы, вы можете использовать распространение, например this.setState({api: [...response.data.RPC1, ...response.data.RPC2]})

4. спасибо вам за вашу помощь.

5. да, большое спасибо.