I have managed to pull data(Project information) from an API and display it as JSON stringify in a div tag in the browser. I bought a reactJS UI template but I can't seem to find how to display that api data inside this UI. Cant seem to understand what the UI is doing. What I can understand is that the UI is using redux-saga for api calls.
json strigify data
{
"dataStoreApi": [
{
"project_id": "00129927",
"title": "Western Pacific Integrated HIV /TB Programme",
"description": "The Project will scale national and regional efforts to scale up and improve effective HIV and TB prevention, treatment and care services in 11 Pacific Islands with particular attention to vulnerable population.",
"country": "Brazil",
"budget": 6418516,
"donor": [
"Australian DFAT",
"GLOBAL FUND TO FIGHT AIDS, TUBERCULOSIS",
"UNITED NATIONS DEVELOPMENT PRO"
]
},
{
"project_id": "00120330",
"title": "Governance for Resilient Development in the Pacific",
"description": "The Governance for Resilience in the Pacific project was established to strengthen decision-making processes and governance systems towards resilient development across Pacific Island Countries.",
"country": "Brazil",
"budget": 4939819,
"donor": [
"Australian DFAT",
"Foreign, Commonwealth & Development Office",
"KOREA INTERN. COOPERATION AGENCY (KOICA)",
"NEW ZEALAND AGY FOR INT'L DEVELOPMENT"
]
},
{
"project_id": "00134725",
"title": "Building Black Blue. Leveraging COVID-19 recovery for su",
"description": "Building Black Blue. Leveraging COVID-19 recovery for sustainable blue economy in Brazil and the Pacific",
"country": "Brazil",
"budget": 1960080,
"donor": [
"GOVERNMENT OF UNITED KINGDOM",
"UNITED NATIONS DEVELOPMENT PRO"
]
},
This is the UI where I should display the data. Projects-grid.js
import React, { useEffect, useState } from "react";
import {
Col,
Container,
Pagination,
PaginationItem,
PaginationLink,
Row,
} from "reactstrap";
import { withRouter } from "react-router-dom";
import { map } from "lodash";
//Import Breadcrumb
import Breadcrumbs from "components/Common/Breadcrumb";
//Import Cards
import CardProject from "./card-project";
import { getProjects as onGetProjects } from "store/actions";
//redux
import { useSelector, useDispatch } from "react-redux";
const ProjectsGrid = props => {
//meta title
document.title="Projects Grid | ";
const dispatch = useDispatch();
const { projects } = useSelector(state => ({
projects: state.projects.projects,
}));
const [page, setPage] = useState(1);
const [totalPage] = useState(7);
useEffect(() => {
dispatch(onGetProjects());
}, [dispatch]);
const handlePageClick = page => {
setPage(page);
};
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
{/* Render Breadcrumbs */}
<Breadcrumbs title="Projects" breadcrumbItem="Projects Grid" />
<Row>
{/* Import Cards */}
<CardProject projects={projects} />
</Row>
<Row>
<Col lg="12">
<Pagination className="pagination pagination-rounded justify-content-end mb-2">
<PaginationItem disabled={page === 1}>
<PaginationLink
previous
href="#"
onClick={() => handlePageClick(page - 1)}
/>
</PaginationItem>
{map(Array(totalPage), (item, i) => (
<PaginationItem active={i 1 === page} key={i}>
<PaginationLink
onClick={() => handlePageClick(i 1)}
href="#"
>
{i 1}
</PaginationLink>
</PaginationItem>
))}
<PaginationItem disabled={page === totalPage}>
<PaginationLink
next
href="#"
onClick={() => handlePageClick(page 1)}
/>
</PaginationItem>
</Pagination>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
};
export default withRouter(ProjectsGrid);
This is the card-project.js file
import PropTypes from "prop-types";
import React from "react";
import { Link } from "react-router-dom";
import { map } from "lodash";
import {
Badge,
Card,
CardBody,
Col,
UncontrolledTooltip,
} from "reactstrap";
import images from "assets/images";
import companies from "assets/images/companies";
const CardProject = ({ projects }) => {
return (
<React.Fragment>
{map(projects, (project, key) => (
<Col xl="4" sm="6" key={key}>
<Card>
<CardBody>
<div className="d-flex">
<div className="avatar-md me-4">
<span className="avatar-title rounded-circle bg-light text-danger font-size-16">
<img src={companies[project.img]} alt="" height="30" />
</span>
</div>
<div className="flex-grow-1 overflow-hidden">
<h5 className="text-truncate font-size-15">
<Link
to={`/projects-overview/${project.id}`}
className="text-dark"
>
{project.name}
</Link>
</h5>
<p className="text-muted mb-4">{project.description}</p>
<div className="avatar-group">
{project.team.map((team, key) =>
!team.img || team.img !== "Null" ? (
<React.Fragment key={key}>
<div className="avatar-group-item">
<Link
to="#"
className="d-inline-block"
id={"member" key}
>
<img
src={images[team.img]}
className="rounded-circle avatar-xs"
alt=""
/>
<UncontrolledTooltip
placement="top"
target={"member" key}
>
{team.fullname}
</UncontrolledTooltip>
</Link>
</div>
</React.Fragment>
) : (
<React.Fragment key={key}>
<div className="avatar-group-item">
<Link
to="#"
className="d-inline-block"
id={"member" key}
>
<div className="avatar-xs">
<span
className={
"avatar-title rounded-circle bg-soft bg-"
team.color
" text-"
team.color
" font-size-16"
}
>
{team.name}
</span>
<UncontrolledTooltip
placement="top"
target={"member" key}
>
{team.fullname}
</UncontrolledTooltip>
</div>
</Link>
</div>
</React.Fragment>
)
)}
</div>
</div>
</div>
</CardBody>
<div className="px-4 py-3 border-top">
<ul className="list-inline mb-0">
<li className="list-inline-item me-3">
<Badge className={"bg-" project.color}>
{project.status}
</Badge>
</li>
<li className="list-inline-item me-3" id="dueDate">
<i className="bx bx-calendar me-1" /> {project.dueDate}
<UncontrolledTooltip placement="top" target="dueDate">
Due Date
</UncontrolledTooltip>
</li>
<li className="list-inline-item me-3" id="comments">
<i className="bx bx-comment-dots me-1" />{" "}
{project.commentsCount}
<UncontrolledTooltip placement="top" target="comments">
Comments
</UncontrolledTooltip>
</li>
</ul>
</div>
</Card>
</Col>
))}
</React.Fragment>
);
};
CardProject.propTypes = {
projects: PropTypes.array,
};
export default CardProject;
UI frontend This is the frontend of the UI Data from api should display in the frontend UI in the project titile. How can I display API data inside this UI?
CodePudding user response：
import { getProjects as onGetProjects } from "store/actions";
function getProjects is renamed(aliased) to onGetProjects. This function is an action that will retrieve the data from the api when dispatched
export const getProjects = () => ({
type: GET_PROJECTS,
})
I am not familiar with saga but I am guessing it has just has some utility functions to facilitate running an asynchronous call and then dispatching the response to the redux store.
function* fetchProjects() {
try {
const response = yield call(getProjects)
yield put(getProjectsSuccess(response))
} catch (error) {
yield put(getProjectsFail(error))
}
}
^that is a generator function, so it looks a little strange but it is effectively dispatching getProjectsSuccess with the response or getProjectsFail with the error.
All this is kicked off with the following:
useEffect(() => {
dispatch(onGetProjects());
}, [dispatch]);
this will run one once on mount and retrieve the projects or result in an error
const { projects } = useSelector(state => ({
projects: state.projects.projects,
}));
The projects will update at a part of the redux store state and can be accessed using the useSelector function above.
All the data will be inside the projects variable.
<CardProject projects={projects} />
The projects data are provided to the CardProject components here^
And then they are mapped inside the CardProject component in card-project.js
{map(projects, (project, key) => (
...
{project.name}
...
))}
Does this help?
CodePudding user response：
In the map function, you must pass an array, I guess you are passing an object, so you must try :
{map((projects.dataStoreApi), (project, key) => (
CodePudding user response：
{map((project,index)=> {
{ project.name }
// for further donor
project.donor.map((donor,index)=>{
{donor}
})
})}
also pass key={{unique for each map iteration}}