Getting one data at table row

Question

Api Data :

{
    "Status": 1000,
    "Properties": {
        "ClipName": "Clip1",
        "Upcounter": "15:33:44:33",
        "DownCounter": "16:33:44:33",
        "ChannelName": "Channel1",
        "StartTimeCode": "00:00:00:00",
        "PlayerName": "Vtr1",
        "Duration": "12:00:00:01"
    }
}
{
    "Status": 1001,
    "Properties": {
        "ClipName": "",
        "Upcounter": "",
        "DownCounter": "",
        "ChannelName": "",
        "StartTimeCode": "",
        "PlayerName": "",
        "Duration": ""
    }
}
{
    "Status": 1000,
    "Properties": {
        "ClipName": "Clip3",
        "Upcounter": "12:33:44:33",
        "DownCounter": "12:33:44:33",
        "ChannelName": "Channel3",
        "StartTimeCode": "00:00:00:00",
        "PlayerName": "Vtr3",
        "Duration": "12:00:00:01"
    }
}
{
    "Status": 1000,
    "Properties": {
        "ClipName": "Clip4",
        "Upcounter": "18:16:27:361",
        "DownCounter": "18:16:27:361",
        "ChannelName": "Channel4",
        "StartTimeCode": "00:00:00:00",
        "PlayerName": "Vtr4",
        "Duration": "12:00:00:01"
    }
}

I have more than 4 data in api but only 1 upcounter is showing how i can shoe more upcounter in table row

CODE :

  const [setdata, fetchdata] = useState([]);
 
  const [data,setData] = useState([]);


  useEffect(() => {
    getfetchData();

  }, [])

  useEffect(() => {
    setdata.forEach(function (val) {
      getPostData(val.Player, val.IP, val.Port, val.ChannelName);
    });
  }, [setdata])

  function getfetchData() {
    axios.get("http://localhost:9763/api/getPlayers",
      {
        headers: {
          "accepts": "application/json",
          'Access-Control-Allow-Origin': '*',
        },
        auth: {
          username: 'admin',
          password: 'password'
        },

      }).then(response => {
        //console.log(response.data)
        //console.log([...Object.values(response.data).flat()]);
        fetchdata([...Object.values(response.data).flat()]);
      }).catch(error => {
        console.log(error);
      });
  }



  // Post Data   

  function getPostData(Player, IP, Port, channelName) {
    var data = {
      PlayerName: Player,
      ChannelName: channelName,
      Port: Port,
      IpAddress: IP
    }
    axios({
      method: 'post',
      url: 'http://localhost:9763/api/getPlayerStatus',
      data,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      auth: {
        username: 'admin',
        password: 'password'
      }
    }).then(response => {
      console.log([response.data]);
      setData([response.data]);    
    
    }).catch(error => {
      console.log("Error In Post Data", error);
    });
  }




  return (
    <div>
      <div className="container-fluid pt-2">
        <table className=" table-borderless text-center tablemainBody">
          <thead>
            <tr className="title" >
              {
                Object.values(setdata).map((val) => {
                  return (
                    <th key={val.Player} > <AiOutlineCheck style={{ color: 'black', backgroundColor: "#41fc00", borderRadius: "25px" }} />
                      {val.ChannelName} </th>
                  )
                })
              }
            </tr>
          </thead>
          <tbody>

            <tr>
              {
                data.map((val, index) => {
                  //  console.log("Inside Map", val);
                  return (
                    <td key={index}>{val.Properties.DownCounter} </td>
                  )
                })
              }

            </tr>
          </tbody>
        </table>    </div>
    </div >

  );
}

Only one api data is fetch/ Display in table row i want more data to show but not able to show that and i also want to use a setInterval but when i use setInterval every pervious data in api is showing in one table row (when i refresh the page itself change in 1 value currently its showing 4 value)

useEffect(() => { setdata.forEach(function (val) { getPostData(val.Player, val.IP, val.Port, val.ChannelName); }); }, [setdata]) — , Jan 10 '22 at 13:12
setdata.forEach?? setdata is a function that sets value for variable "data" — Marzieh Mousavi, Jan 10 '22 at 13:25
setdata using a axios get method and that gave me ip,port,channelname, and then i pass this ip,port.... in getpostData function to check the post data body header and that give me above api data to display the upcounter time in table row — , Jan 10 '22 at 13:30
please edit your question and write your whole code. also you can check this link about using foreach and usestate : https://stackoverflow.com/questions/65715339/how-to-set-a-state-in-a-foreach-loop-using-usestate-hook — Marzieh Mousavi, Jan 10 '22 at 13:39

Marzieh Mousavi · Answer 1 · 2022-01-10T14:10:10.087

you should add new responses to data in this way:

setData([...data, response.data ]);

I also changed some of the names to simplify the code. This is the usual naming in useState :

const [name , setName] = useState();

try this code

  const [fetchedData, setFetchedData] = useState([]);
 
  const [data,setData] = useState([]);


  useEffect(() => {
    getfetchData();

  }, [])

  useEffect(() => {
    fetchedData.forEach(function (val) {
      getPostData(val.Player, val.IP, val.Port, val.ChannelName);
    });
  }, [fetchedData])

  function getfetchData() {
    axios.get("http://localhost:9763/api/getPlayers",
      {
        headers: {
          "accepts": "application/json",
          'Access-Control-Allow-Origin': '*',
        },
        auth: {
          username: 'admin',
          password: 'password'
        },

      }).then(response => {
        //console.log(response.data)
        //console.log([...Object.values(response.data).flat()]);
        setFetchedData([...Object.values(response.data).flat()]);
      }).catch(error => {
        console.log(error);
      });
  }



  // Post Data   

  function getPostData(Player, IP, Port, channelName) {
    var data = {
      PlayerName: Player,
      ChannelName: channelName,
      Port: Port,
      IpAddress: IP
    }
    axios({
      method: 'post',
      url: 'http://localhost:9763/api/getPlayerStatus',
      data,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      auth: {
        username: 'admin',
        password: 'password'
      }
    }).then(response => {
      console.log([response.data]);
      setData([...data, response.data ]);    
    
    }).catch(error => {
      console.log("Error In Post Data", error);
    });
  }




  return (
    <div>
      <div className="container-fluid pt-2">
        <table className=" table-borderless text-center tablemainBody">
          <thead>
            <tr className="title" >
              {
                Object.values(fetchedData).map((val) => {
                  return (
                    <th key={val.Player} > <AiOutlineCheck style={{ color: 'black', backgroundColor: "#41fc00", borderRadius: "25px" }} />
                      {val.ChannelName} </th>
                  )
                })
              }
            </tr>
          </thead>
          <tbody>

            <tr>
              {
                data.map((val, index) => {
                  //  console.log("Inside Map", val);
                  return (
                    <td key={index}>{val.Properties.DownCounter} </td>
                  )
                })
              }

            </tr>
          </tbody>
        </table>    </div>
    </div >

  );
}

setData(data=>[...data, response.data]); i added this and showing me values but when i set a interval it goes like a array in page . useEffect(() => { fetchedData.forEach(function (val) { setInterval(() => { getPostData(val.Player, val.IP, val.Port, val.ChannelName); }, 500); }); }, [fetchedData]) Image Add in upper questions — , Jan 10 '22 at 14:38
you want to use setInterval for what? show a new response from axios every 500 milliseconds? or update data every 500 milliseconds? — Marzieh Mousavi, Jan 10 '22 at 15:00
in backend DownCounter is time which is running, for showing that what I do? — , Jan 10 '22 at 15:05
i want that when backend time is change it's reflect in frontend , update that DownCounter so that time is match with backend time so that why i add the setInterval to every 500 second downcounter update — , Jan 10 '22 at 15:17
is it possible to refresh the table row without reload the web page? — , Jan 10 '22 at 15:18
yes. check this link : https://stackoverflow.com/questions/57542264/how-to-setinterval-for-every-5-second-render-with-react-hook-useeffect-in-react — Marzieh Mousavi, Jan 10 '22 at 15:25

Getting one data at table row

1 Answers1