>웹 프론트엔드 >JS 튜토리얼 >최적화된 렌더링을 위해 키 값을 기반으로 개체 배열을 중첩하는 방법은 무엇입니까?

최적화된 렌더링을 위해 키 값을 기반으로 개체 배열을 중첩하는 방법은 무엇입니까?

DDD
DDD원래의
2024-12-04 11:29:101107검색

How to Nest an Array of Objects Based on Key Values for Optimized Rendering?

중첩 키를 사용하여 개체 배열 그룹화

문제:

주어진 개체 배열에서 작업은 재구성하는 것입니다. 특정 키를 기반으로 중첩된 구조를 생성하여 렌더링에 최적화된 형식으로 변환합니다. 값.

예:

입력 배열:

[
  {
    tab: 'Results',
    section: '2017',
    title: 'Full year Results',
    description: 'Something here',
  },
  {
    tab: 'Results',
    section: '2017',
    title: 'Half year Results',
    description: 'Something here',
  },
  {
    tab: 'Reports',
    section: 'Marketing',
    title: 'First Report',
    description: 'Something here',
  }
]

원하는 출력:

[
  {
    tab: 'Results',
    sections: [
      {
        section: '2017',
        items: [
          { 'item that belongs here' },
          { ... }
        ]
      }
    ]
  },
  {
    tab: 'Reports',
    sections: [
      {
        section: 'Marketing',
        items: [
          { ... },
          { ... }
        ]
      }
    ]
  }
]

솔루션 :

이번 변신은 lodash 함수 _.map 및 _.groupBy의 조합을 사용하여 달성할 수 있습니다.

function groupAndMap(items, itemKey, childKey, predic) {
  return _.map(_.groupBy(items, itemKey), (obj, key) => ({
    [itemKey]: key,
    [childKey]: (predic && predic(obj)) || obj
  }));
}

원하는 대로 데이터를 중첩하려면 groupAndMap을 재귀적으로 적용합니다.

const output = groupAndMap(items, "tab", "sections", arr =>
  groupAndMap(arr, "section", "items")
);

이 솔루션은 다음을 수행합니다. 특정 키 값을 기반으로 객체 배열을 그룹화하고 중첩하는 목적.

위 내용은 최적화된 렌더링을 위해 키 값을 기반으로 개체 배열을 중첩하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.