How can i store api response in variable and pass it to react popup video player

Question

Call API using fetch and printed it on the console.

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 });
      });
  };

using fetch to call api and printed it on console.

api response :

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"

This response i got from API. now how to store API response in a react js variable. After storing data how pass Video_Name:"http://localhost:4000/video/*" to react player source

Assign this response to react table :

 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>;

For more code reference

CLICK HERE

Muhammad Hassan Sheikh · Answer 1 · 2022-05-27T07:44:38.857

2

you should be using the useState hook to store the response from the 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 });
      });
  };

then finally using the array in the iframe, and outputting an iframe for each link.

<DialogContent>
  {response.map(({Video_Name})=> 
  <iframe
    width="420"
    height="315"
    title="videos"
    src={Video_Name}
    />
  )}
</DialogContent>;

edited May 27 '22 at 07:44

answered May 27 '22 at 07:33

Muhammad Hassan Sheikh

261
3
12

@HariprasathLakshmanan Sorry, small mistake. Set the initial value of response to an empty array. const [response, setResponse] = useState([]); Try this and then let me know. – Muhammad Hassan Sheikh May 27 '22 at 07:45
Its working but at a time multiple popup player open and playing same video. refer here `https://github.com/iamharry-dev/modal_popup/blob/main/error_1.png` – Hariprasath Lakshmanan May 27 '22 at 07:52
We are getting the video links from the API. Can you log the urls? console.log(response.map(({Video_Name}) => Video_Name)); and confirm if the links are different. Also, according to the code, the list of all the videos will be outputted. Are you trying to display a single video at a time? – Muhammad Hassan Sheikh May 27 '22 at 07:57
Yes actually i give button to all the response and populated it to react table [link](https://github.com/iamharry-dev/modal_popup/blob/main/1.png) like this when i click play button i want play single video at a time – Hariprasath Lakshmanan May 27 '22 at 08:00
is there any update on above issue ??? – Hariprasath Lakshmanan May 27 '22 at 09:34

score 1 · Accepted Answer · answered Jun 04 '22 at 04:04

No need to use the click handler of the button. You cannot get row data with that.

Add a colId to column definition for actions. Then handle the onCellClicked action of the grid. You can get the row data using 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>

Codesand box Link

How can i store api response in variable and pass it to react popup video player

2 Answers2