Next.js Discord

Discord Forum

Data from Api is not displayed on my page but is on console.log

Unanswered
Weevil parasitoid posted this in #help-forum
Open in Discord
Weevil parasitoidOP
i have an issue that i cant display job details about the job that is rendered from JobAccordion to jobs/[jobId]/page.tsx in nextjs 14 app router project, on vscode console the job data is showing but not on a browser page its not :

here is the code in question : 
//app/api/jsearch/route.ts
export const getJobDetails = async (jobId: string, options: Record<string, any> = {}): Promise<JobDetailsResponse> => {
  try {
    const response: AxiosResponse<JobDetailsResponse> = await api.get('https://jsearch.p.rapidapi.com/job-details', {
      params: {
        job_id: jobId,
        //extended_publisher_details: 'false',
        ...options
      }
    });
    return response.data;
  } catch (error) {
    console.error('Error fetching job details:', error);
    throw error;
  }
};

3 Replies

Weevil parasitoidOP
the component that displays a list of jobs :
const JobAccordion: React.FC = () => {
  const [jobs, setJobs] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const router = useRouter();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response: SearchJobsResponse = await searchJobs('jobs near me', {
          page: '1',
          num_pages: '1',
        });
        setJobs(response.data);
        setIsLoading(false);
      } catch (error) {
        console.error('Error fetching job data:', error);
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  const handleApplyClick = (jobId: string) => {
    const decodedJobId = decodeURIComponent(jobId); // Decode jobId if it's URL encoded
    router.push(`/jobs/${decodedJobId}`);
  };

  if (isLoading) {
    return (
      <div>
        {[...Array(10)].map((_, index) => (
          <Loading key={index} />
        ))}
      </div>
    );
  }
@Weevil parasitoid the component that displays a list of jobs : const JobAccordion: React.FC = () => { const [jobs, setJobs] = useState<any[]>([]); const [isLoading, setIsLoading] = useState<boolean>(true); const router = useRouter(); useEffect(() => { const fetchData = async () => { try { const response: SearchJobsResponse = await searchJobs('jobs near me', { page: '1', num_pages: '1', }); setJobs(response.data); setIsLoading(false); } catch (error) { console.error('Error fetching job data:', error); setIsLoading(false); } }; fetchData(); }, []); const handleApplyClick = (jobId: string) => { const decodedJobId = decodeURIComponent(jobId); // Decode jobId if it's URL encoded router.push(`/jobs/${decodedJobId}`); }; if (isLoading) { return ( <div> {[...Array(10)].map((_, index) => ( <Loading key={index} /> ))} </div> ); }
Weevil parasitoidOP
  return (
    <div>
      <Accordion type="single" collapsible className="w-full">
        {jobs.map((job) => (
          <AccordionItem
            key={job.job_id}
            className="mb-5"
            value={`item-${job.job_id}`}
          >
            <AccordionTrigger showApplyButton={true} applyLink={`/jobs/${job.job_id}`}>
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4">
                  {job.employer_logo && (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={job.employer_logo}
                      alt={`${job.employer_name} Logo`}
                      style={{ width: '50px', height: '50px' }}
                    />
                  )}
                  <div>
                    <h2>{job.job_title}</h2>
                  </div>
                </div>
              </div>
            </AccordionTrigger>
            <AccordionContent>
              <div className="px-5 py-5 text-sm">
                {job.job_description && (
                  <>
                    <ReactMarkdown>{job.job_description}</ReactMarkdown>
                    <br />
                  </>
                )}
              </div>
              <button
                onClick={() => handleApplyClick(job.job_id)}
                className="mt-2 p-2 bg-red-500 text-white rounded"
              >
                Apply
              </button>
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
};

export default JobAccordion;
and a page that should display the job details app/jobs/[jobId]/page.tsx : 
 import React from 'react';
import { getJobDetails } from '@/app/api/jsearch/route';
import { JobDetailsResponse } from '../../../../types/job';

interface JobDetailsPageProps {
  params: {
    jobId: string;
  };
}

async function fetchJobDetails(jobId: string) {
  try {
    console.log('Fetching job details for Job ID:', jobId); // Debugging statement
    const response: JobDetailsResponse = await getJobDetails(jobId, {
      extended_publisher_details: 'true',
    });
    console.log('API Response:', response); // Debugging statement
    return response;
  } catch (error) {
    console.error('Error fetching job details:', error);
    return null;
  }
};

export default async function JobDetailsPage({ params: { jobId } }: JobDetailsPageProps) {
  jobId = decodeURIComponent(jobId); // Decode jobId if it's URL encoded
  console.log('Decoded Job ID:', jobId); // Debugging statement
  const jobPreview = await fetchJobDetails(jobId);

  console.log('Job Preview:', jobPreview); // Debugging statement

  if (!jobPreview) {
    return <div>No job details found.</div>;
  }

  return (
    <div>
      <h1>{jobPreview.job_title}</h1>
      <h1>Job ID: {jobPreview.job_id}</h1>
      <p>Employer: {jobPreview.employer_name}</p>
      {jobPreview.employer_logo && (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={jobPreview.employer_logo} alt={`${jobPreview.employer_name} Logo`} style={{ width: '100px', height: '100px' }} />
      )}
      <p>Website: {jobPreview.employer_website ? <a href={jobPreview.employer_website}>{jobPreview.employer_website}</a> : 'No website available'}</p>
      <p>{jobPreview.job_description}</p>
    </div>
  );
}