I've got ReactJs who is getting response from backend server. console.log(content)
is looking like this:
{
"data": {
"dataNKS": [
75670.99,
75654.97,
75943.38
],
"dataMNKS": [
37835.5,
37827.49,
37971.69
],
"dataEKS": [
75871.73,
75816.11,
76062.19
],
"dataMEKS": [
37935.86,
37908.05,
38031.1
]
},
"id": "32083654",
"descr": "articleno1",
"price": "75.284",
"link": "/linkno1",
"sqm": "75",
"ppm2": "2151"
}
Now in my react app I can easily access to data with {content.price}
eg. and I will get 75.284
.
Now trouble I've got is when accessing content.data
. I can access to data and console.log
it, where data is formatted like this:
{dataNKS: Array(3), dataMNKS: Array(3), dataEKS: Array(3), dataMEKS: Array(3)}
Now my question is how to access each data and output it? Desired look in React app would be to output value of dataNKS + dataMNKS
and under it dataEKS + dataMEKS
eg. 75670 - 37835.5
- this is first entries of arrays dataNKS
and dataMNKS
.
I've tried
const a = content.data;
return(
<div className ='container'>
{a.map((item, i) => (
<li key={i}>
{item.dataEKS}
{item.dataMEKS}
</li>
))}
</div>
);
-------Eror Cannot read property 'map' of undefined----------
<div className='container'>
{Object.keys(a).map((keyName, i) => (
<div key={i}>
<strong>Name: {a[keyName]}</strong>
</div>
))}
</div>
-------Error Cannot convert undefined or null to object-------
and few other methods but without success. What is correct way of displaying data from this object?
EDIT:
Requested part of getting content:
const [content, setContent] = useState([]);
useEffect(() => {
const fetchPosts = async () => {
const id = props.match.params.id;
const res = await ArticleService.article(id);
setContent(res.data);
};
fetchPosts();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
and after this I can console.log(content)
question from:
https://stackoverflow.com/questions/65882024/what-is-the-correct-way-for-getting-data-from-this-object-in-reactjs