4.5 {#each}로 JSON 객체 다루기, 다차원 배열 표시하기
#each는 배열뿐 아니라 JSON 객체도 표현할 수 있습니다.
다음 코드에서 emailCard라는 JSON 객체를 만든 뒤 #each를 사용해 키와 키 값을 모두 나타내보겠습니다. 이때 Object.entries 함수를 사용하겠습니다. 이 함수는 JSON 객체를 배열 형태로 만들어줍니다. svelte.dev 웹 사이트에서 REPL로 이동하여 App.svelte의 코드를 다음과 같이 작성합니다.
REPL의 App.svelte, Object.entries와 each를 사용해 JSON 내용 표시하기
<script>
// JSON c객체 선언
let emailCard = { _id: "a1", name: "둘리", email: "d2@mail.com", age: 10};
// 콘솔에서 Object.entries 호출 결과 보기
console.log(Object.entries(emailCard));
</script>
<main>
<!-- Object.entries의 반환값(배열)으로 반복 실행 -->
{#each Object.entries(emailCard) as [key, value], idx}
<p>{idx}번째 키: {key}의 값은 {value}</p> <!-- 키와 값 출력 -->
{/each}
</main>