CODEWITHSUNDEEP
reactjsajaxaxios
SkRoR
SkRoR

Reputation: 1199

How to map a nested JSON response in React

I have to map the nested JSON result in React. The below one is the response I got as response from backend API.

{
"id": 2,
"name": "sanjna",
"email": "[email protected]",
"address": "iiiii, hhh",
"gender": "1",
"tagline": "Friendly to all",
"description": "4 years experience in programming",
"languages": "English ",
"key_skills": [
    {
        "id": 1,
        "name": "RUBY ON RAILS, HTML, BOOTSTRAP, JQUERY, REACT",
        "relevant_experience": "4"
    },
    {
        "id": 2,
        "name": "ruby",
        "relevant_experience": "2"
    }
],
"certifications": [
    {
        "id": 1,
        "name": "MCA",
        "institution_name": "vvv unversity",
        "certification_date": "20-12-2020",
        "image": null
    },
    {
        "id": 2,
        "name": "HTML training",
        "institution_name": "nnn unversity",
        "certification_date": "20-12-2022",
        "image": null
    }
],
"educations": [
    {
        "id": 1,
        "qualification": "MCA",
        "course": "Masters Degree PG",
        "institute": "kkk",
        "ins_location": "jjjj",
        "passing_year": "2015"
    }
]
}

This is my React code to get this response

    const [singleUserDetail, setsingleUserDetail] = React.useState('');
let logged_user_id = job_seeker.actable_id;
    const getsingleUserDetails = (logged_user_id) => {
    axios
        .get(`http://localhost:3001/users/${logged_user_id}`, { withCredentials: true })
        .then((response) => {
          const singleUserDetail = response.data;
          setsingleUserDetail(response.data)
           console.log(response.data); //prints the above JSON results in console
        })
        .catch((error) => {
            console.log(" error", error);
        });
};
  React.useEffect(() => {
    getsingleUserDetails(logged_user_id);
  }, [logged_user_id]);

When I prints {singleUserDetail.name} it gives me result sanjna {singleUserDetail.email} it gives me result [email protected] {singleUserDetail. address} it gives me result iiiii, hhh. from my above JSON result

But how to print keyskills, certifications and educations here with mapping. I'm a beginner in React.

Upvotes: 0

Views: 177

Answers (1)

Jamt0
Jamt0

Reputation: 181

Youu can do something like this, my example is very simple,but you can complicate this as much as you need, with conditions or loops in loops.

<div>
  {singleUserDetail.name},{singleUserDetail.email},{singleUserDetail.address},{singleUserDetail.gender},{singleUserDetail.tagline},{singleUserDetail.description}, {singleUserDetail.languages}
</div>

{singleUserDetail.key_skills.map((skill)=>{
  return(
    <div key={skill.id}>
      {skill.name}:{skill.relevant_experience}
    </div>
  );
})}

{singleUserDetail.certifications.map((certification)=>{
  return(
    <div key={certification.id}>
      {certification.name},{certification.institution_name},{certification.certification_date}
    </div>
  );
})}

{singleUserDetail.educations.map((education)=>{
  return(
    <div key={education.id}>
      {education.qualification},{education.course},{education.institute}
    </div>
  );
})}

For more information, React documentation

Upvotes: 1

Related Questions