I have a Redux action function called getAllJob
which is supposed to get all jobs informations (title and description) from database:
JavaScript
x
16
16
1
export const getAllJob = (callback) => {
2
//make checks and get some data
3
return () => {
4
axios.get("http://localhost:5000/api/form/listjob")
5
.then((response) => {
6
const { data } = response;
7
callback(response.data.data);
8
if (data.status === "FAILED") {
9
const { message } = data;
10
console.log(message);
11
}
12
})
13
.catch(err => { console.error(err) });
14
}
15
}
16
Now i need to map this response.data.data
to UI to be rendered so i get a list of jobs with titles and descriptions for each one from database. For that, i tried the below code but it doesn’t work:
JavaScript
1
7
1
//show title only of job from data
2
<h1>
3
{response.data.data.map((data, i) => {
4
return({response.data.data.title})
5
})}
6
</h1>
7
Kindly can you help me achieve my goal?
Update:
adding console.log(response), shows this:
JavaScript
1
50
50
1
{
2
"data": {
3
"success": true,
4
"message": "Jobs fetched successfully!",
5
"data": [
6
{
7
"_id": "62b442f01fd1bd2901cccd27",
8
"title": "This is job title",
9
"description": "This is the job description",
10
"createdAt": "2022-06-23T10:39:44.250Z",
11
"updatedAt": "2022-06-23T10:39:44.250Z",
12
"__v": 0
13
}
14
]
15
},
16
"status": 200,
17
"statusText": "OK",
18
"headers": {
19
"content-length": "257",
20
"content-type": "application/json; charset=utf-8"
21
},
22
"config": {
23
"transitional": {
24
"silentJSONParsing": true,
25
"forcedJSONParsing": true,
26
"clarifyTimeoutError": false
27
},
28
"transformRequest": [
29
null
30
],
31
"transformResponse": [
32
null
33
],
34
"timeout": 0,
35
"xsrfCookieName": "XSRF-TOKEN",
36
"xsrfHeaderName": "X-XSRF-TOKEN",
37
"maxContentLength": -1,
38
"maxBodyLength": -1,
39
"env": {
40
"FormData": null
41
},
42
"headers": {
43
"Accept": "application/json, text/plain, */*"
44
},
45
"method": "get",
46
"url": "http://localhost:5000/api/form/listjob"
47
},
48
"request": {}
49
}
50
Advertisement
Answer
Try setting you response as a state variable which you can then loop through.
JavaScript
1
11
11
1
const [apiData, setApiData] = useState([]);
2
3
useEffect(() => {
4
axios
5
.get("http://localhost:5000/api/form/listjob")
6
.then((res) => {
7
setApiData(res.data.data);
8
})
9
.catch((err) => console.log(err));
10
}, []);
11
And then for mapping:
JavaScript
1
6
1
<div>
2
{apiData.map((data, i) => (
3
<h1>{data.title}</h1>
4
))}
5
</div>
6
Note: If this doesn’t work, provide us the logged response from the api call.