Llame a la API usando fetch e imprímala en la consola.
app.js
const onGridReady = (params) => { console.log("grid is ready"); fetch("http://localhost:8000/get_all") .then((resp) => resp.json()) .then((resp) => { console.log(resp.results); params.api.applyTransaction({ add: resp.results }); }); };usando fetch para llamar a api y lo imprimí en la consola.
respuesta api:
Array(80) 0: Camera_Number: "Camera_1" Company_Name: "Fraction Analytics Limited" Floor Number: "Ground_Floor" Group_Name: "Group_1" Video_Name: "http://localhost:4000/video/0" [[Prototype]]: Object 1: Camera_Number: "Camera_2" Company_Name: "Fraction Analytics Limited" Floor Number: "Ground_Floor" Group_Name: "Group_1" Video_Name: "http://localhost:4000/video/1" Esta respuesta la obtuve de la API. ahora cómo almacenar la respuesta de la API en una variable reaccionar js. Después de almacenar datos, cómo pasar Video_Name:"http://localhost:4000/video/*" para reaccionar fuente del reproductor
Asigne esta respuesta a la tabla de reacciones:
const columnDefs = [ { headerName: "Name", field: "Company_Name", filter: "agSetColumnFilter" }, { headerName: "Floor", field: "Floor Number" }, { headerName: "Group", field: "Group_Name" }, { headerName: "Camera", field: "Camera_Number" }, { headerName: "Videos", field: "Video_Name" }, { headerName: "Actions", field: "Video_Name", cellRendererFramework: (params) => ( <div> <Button variant="contained" size="medium" color="primary" onClick={() => actionButton(params)} > Play </Button> </div> ), }, ]; <DialogContent> <iframe width="420" height="315" title="videos" src={("http://localhost:4000/video/0", "http://localhost:4000/video/1")} /> </DialogContent>;Para más referencia de código
debería usar el enlace useState para almacenar la respuesta de la API
const [response, setResponse] = useState([]); const onGridReady = (params) => { console.log("grid is ready"); fetch("http://localhost:8000/get_all") .then((resp) => resp.json()) .then((resp) => { setResponse(resp.results); params.api.applyTransaction({ add: resp.results }); }); };luego, finalmente, usar la matriz en el iframe y generar un iframe para cada enlace.
<DialogContent> {response.map(({Video_Name})=> <iframe width="420" height="315" title="videos" src={Video_Name} /> )} </DialogContent>;No es necesario utilizar el controlador de clics del botón. No puede obtener datos de fila con eso.
Agregue un colId a la definición de columna para las acciones. Luego maneje la acción onCellClicked de la cuadrícula. Puede obtener los datos de la fila usando params.node.data .
const [videoName, setVideoName] = useState(""); function onCellClicked(params) { // maps to colId: "action" in columnDefs, if (params.column.colId === "action") { // set videoName for the row setVideoName(params.node.data.Video_Name); setOpen(true); } } // grid config <AgGridReact ... rowData={response} onCellClicked={onCellClicked}> </AgGridReact> // access videoName in dialog content <DialogContent> {/* <iframe width="420" height="315" title="videos" src={id} /> */} <div>{videoName}</div> </DialogContent>