json file missing Brackets - html

Question

json format test with postman
{
"localTimeStamp": "2021-08-14T08:19:17.000Z",
"ipAddress": "10.0.5.26",
"subnetMask": "N/A",
"defaultGateway": "N/A",
"productType": "UNIVERGE BX9000",
"versionID": "7.20A.256.721",
"protocolType": "SIP",
"operationalState": "UNLOCKED",
"highAvailability": "Not Operational",
"serialNumber": "9107130",
"macAddress": "00908f8af6ba",
"systemUpTime": 4049040,
"saveNeeded": false,
"resetNeeded": false
}
i use this code in nex.js to fetch the info
import styles from '../styles/Jobs.module.css'
export const getStaticProps = async () => {
const res = await fetch('http://10.0.5.26/api/v1/status',{
headers: { Authorization: "Basic passsssworrdssss" }
}
);
const data = await res.json();
return {
props: { ninjas: data }
}
}
const Ninjas = ({ ninjas }) => {
console.log(ninjas)
return (
<div>
<h1>All Ninjas</h1>
{ninjas.map(ninja => (
<div key={ninja.id}>
<a className={styles.single}>
<h3>{ ninja.productType }</h3>
</a>
</div>
))}
</div>
);
}
export default Ninjas;
the error is browser
enter image description here
think the problem is The .map function is only available on array.
It looks like data isn't in the format you are expecting it to be (it is {} but im expecting []).
hopefully someone knows the solution to solve the error
output of console.log(ninjas) looks ok now
only got still error in browser
ReferenceError: ninja is not defined
[
{
localTimeStamp: '2021-08-14T10:30:35.000Z',
ipAddress: '10.0.5.26',
subnetMask: 'N/A',
defaultGateway: 'N/A',
productType: 'UNIVERGE BX9000',
versionID: '7.20A.256.721',
protocolType: 'SIP',
operationalState: 'UNLOCKED',
highAvailability: 'Not Operational',
serialNumber: '9107130',
macAddress: '00908f8af6ba',
systemUpTime: 4056919,
saveNeeded: false,
resetNeeded: false
}
]

Answer 1

It's an object so you don't need to loop through it to get the value insides:
Just direct access them like this:
<div>
<h1>All Ninjas</h1>
<div key={ninja.id}>
<a className={styles.single}>
<h3>{ ninja.productType }</h3>
</a>
</div>
</div>
- Be aware that id is not available in your object so ninja.id is invalid which return an undefined
- Consider using getServerSideProps to fetch data on each request. Because getStaticProps fetch data at build time

Answer 2

props: { ninjas: data }
Here, according to your description, data is given as
{ "localTimeStamp": "2021-08-14T08:19:17.000Z" ...}
So ninjas is not an array, it's a normal object now.
ninjas.map requires ninjas to be an array and as it is not, an error occured.
To fix it, you can fix this part.
props: { ninjas: [data]}