Not able to map the fetching value in axios - node.js

Question

code
import React, { useEffect, useState } from "react";
import "./main.css"
import { AiOutlineCheck, AiOutlineClose, AiOutlineArrowUp, AiOutlineArrowDown } from "react-icons/ai";
import axios from "axios";
const Header = () => {
const [setdata, fetchdata] = useState([]);
const [setpostData, Postdata] = 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);
});
}
var temp = [];
// 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 => {
var tempObj;
tempObj = [response.data];
for (var i = 0; i <= tempObj.length; i++) {
if (tempObj[i] !== undefined) {
temp.push(tempObj[i]);
}
}
Postdata(temp);
}).catch(error => {
console.log("Error In Post Data", error);
});
}
console.log("set", setpostData);
return (
<div className="container-fluid pt-2">
<table className=" table-borderless text-center" id="refresh">
<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 >
{
setpostData.map((val, index) => {
// console.log("Inside Map", val);
return (
<td key={index}>{val.Properties.Upcounter} </td>
)
})
}
</tr>
<tr>
{
setpostData.map((val, index) => {
// console.log("Inside Map", val);
return (
<td key={index}>{val.Properties.DownCounter} </td>
)
})
}</tr>
</tbody>
</table>
</div >
);
}
export default Header;
not able to map the table row only first fetch data is visible in data row i have 4 data in fetch
Console Image
and why 2 set In console is fetch? please help me i want to store the fetch data in temp and then display in table row for setInterval
Please provide code
first, I fetch channels 1,2,3,4 from get method and then call post data in which I call function parameter and check the get method data in the body parameter of post method and print the data of post method but it is in the form of object in the console and I want to store in temp and them display it in the web page

Answer 1

It looks like you might need to parse the returned value before trying to map over it.
The returned value is JSON, not JS.
JSON.parse(response.data)