Как отобразить данные поля в объекте JSON, который является массивом объектов

Question

В моем приложении реакции я использую API, который содержит внутри ответа JSON поле с именем experience, которое содержит [{},{}]. На мой взгляд, мне нужно показать, что внутри этого tarry, и я пытаюсь использовать .map(). Например, я хочу показать список опытов.

Ответ API для получения опыта заключается в следующем:

{
  "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
    }
  ]
}

Мне интересно, что находится внутри expereince[], и я хочу показать эти данные в списке.

Я попробовал вот что:

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;

Я могу отлаживать до {E.expereince.role} и role не определено, но опыт вместо этого содержит мои 2 объекта массива, и я не могу понять, как я могу показать этот список. Нужно ли для этого дополнительное картирование или нужно изменить подход?

Answer 1

//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>)
              )}

Answer 2

E.experience.role не будет работать, потому что experience - это массив. Вам нужно будет либо сопоставить эти E.experience.map(value => value.role), либо ссылаться на правильный индекс E.experience[0].role.

. Для вашего варианта использования может быть что-то подобное:

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

Или, если вы хотите учетная запись для нескольких 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>
    ))}
  </>
))}