how to map the data in table row? - node.js

Question

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.
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);
// setInterval(() => {
// getPostData(val.Player, val.IP, val.Port, val.ChannelName);
// }, 500);
});
}, [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 => {
}).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;
Console Response.data show object
how to make this 4 object in one array so that its easily to map in row
[
{
"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": 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": "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": 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"
}
}
]

Answer 1

you have to map the values before <tr> I think its work. can you post the output UI of the table
And for merging array object you can do this way. I think its work
var newArray = [...arr1, ...arr2, ...aar3,...arr4];