How to map data of a field in an JSON object which is an array of objects

Question

In my react app I'm consuming an API that contains inside the JSON response a field called experience which contains an [{},{}]. In my view, I need to show what inside that tarry and I'm trying to use .map(). For example, I want to show a list of experiences.

The API response getting the Experiences is that:

{
  "profileExperiences": [
    {
      "username": "Jakos",
      "experience": [
        {
          "image": "https://via.placeholder.com/150",
          "_id": "5e3975f95fbeec9095ff3d2f",
          "role": "Developer",
          "company": "Google",
          "startDate": "2018-11-09T23:00:00.000Z",
          "endDate": "2019-01-05T23:00:00.000Z",
          "area": "Copenhagen",
          "createdAt": "2020-02-04T13:47:37.167Z",
          "updatedAt": "2020-02-04T13:47:37.167Z"
        },
        {
          "image": "https://via.placeholder.com/150",
          "_id": "5e3978bf5e399698e20c56d4",
          "role": "Developer",
          "company": "IBM",
          "startDate": "2018-11-09T23:00:00.000Z",
          "endDate": "2019-01-05T23:00:00.000Z",
          "area": "Copenhagen",
          "createdAt": "2020-02-04T13:59:27.412Z",
          "updatedAt": "2020-02-04T13:59:27.412Z"
        }
      ],
      "experiences_count": 2
    }
  ]
}

I'm interested in what is inside the expereince[] and I want to show that data in a list.

What I tried is this:

const Experiences = () => {
  const dispatch = useDispatch();
  const { experiences } = useSelector(state => ({
    experiences: state.ExperiencesReducer.experiences
  }));

  console.log("My Exp", experiences.profileExperiences);

  useEffect(() => {
    dispatch(ExperiencesMiddleware.getAllExperiencesProfile(USERNAME));
  }, [dispatch]);

  return (
    <>
      <Container>
        <h1>Experience</h1>

        {experiences.profileExperiences &&
          experiences.profileExperiences.map((E, k) => (
            <Row key={k}>
              <ul>
                <li>{E.experience.role}</li>
              </ul>
            </Row>
          ))}
      </Container>
    </>
  );
};

export default Experiences;

I'm able to debug until {E.expereince.role} and the role is undefined but experience instead contains my 2 obj of the array and I cannot figure out how can I show that list. Do I need an extra mapping for it or need to change approach?

Dipesh KC · Accepted Answer · 2020-02-05 14:10:55Z

2

//Your need one more mapping for experience array  
  {experiences.profileExperiences &&
              experiences.profileExperiences.map((P) =>P.experience).flat().map((E,k)=>(
                <Row key={k}>
                  <ul>
                    <li>{E.role}</li>
                  </ul>
                </Row>)
              )}

edited Feb 5, 2020 at 14:10

answered Feb 5, 2020 at 14:02

Dipesh KC

2,4631 gold badge19 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jakub Over a year ago

I'm getting this error now: TypeError: (intermediate value).map is not a function

Dipesh KC Over a year ago

yeah.I will get back to you in minutes with updated answer

Dipesh KC Over a year ago

I have Edited my answer.If you want all experience to show,it works

Emile Bergeron Over a year ago

Not that it matter much, but don't use the index as the key (key={k}) and instead use the unique ID already available with each item here, E._id.

Brian Thompson · Accepted Answer · 2020-02-05 14:08:17Z

0

E.experience.role won't work because experience is an array. You will need to either map through those E.experience.map(value => value.role) or reference the correct index E.experience[0].role.

For your usecase maybe something like this would work:

experiences.profileExperiences[0].experience.map((E, k) => (
  <Row key={k}>
    <ul>
      <li>{E.role}</li>
    </ul>
  </Row>
))}

Or if you want to account for multiple profileExperiences:

experiences.profileExperiences.map((E, k) => (
  <>
    <h1>Profile: {E.username}</h1>
    {E.exeriences.map(ex => (
      <Row key={k}>
        <ul>
          <li>{ex.role}</li>
        </ul>
      </Row>
    ))}
  </>
))}

edited Feb 5, 2020 at 14:08

answered Feb 5, 2020 at 14:02

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

1 Comment

Jakub Over a year ago

I tried your version but gives map is undefined TypeError: Cannot read property 'map' of undefined

Collectives™ on Stack Overflow

How to map data of a field in an JSON object which is an array of objects

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related