JavaScript 개체를 HTML 요소로 표시하는 방법

이 자습서에서는 JavaScript 개체 목록을 웹 페이지에 HTML 요소 목록으로 표시하는 방법을 배웁니다.

JavaScript 개체 목록이 있고 웹 브라우저에서 HTML 요소로 출력해야 한다고 가정해 보겠습니다. 이 예에는 JavaScript 객체 리터럴로 표시되는 연습 목록이 있습니다.

자바스크립트 객체 리터럴:

let exerciseList = [
  {
    name: "Deadlift",
  },
  {
    name: "Push-up",
  },
  {
    name: "Pull-up",
  },
  {
    name: "Squat",
  },
];

위는 4개의 객체(연습)가 있는 JavaScript 객체 리터럴 배열입니다. 다음과 같이 해당 개체를 가져와 브라우저에 목록으로 표시하려고 합니다.

• 데드리프트
• 풀업
• 푸시업
• 스쿼트

순서가 없는 목록입니다. Chrome DevTools에서 위 목록을 검사하면 위 목록의 HTML 마크업이 다음과 같이 표시됩니다.

<ul>
  <li>Deadlift</li>
  <li>Pull-up</li>
  <li>Push-up</li>
  <li>Squat</li>
</ul>

JavaScript 객체 리터럴 배열을 HTML 요소로 표시

다음 4단계를 수행해야 합니다.

1. HTML로 정렬되지 않은 빈 목록 요소를 만들어 그 안에 운동 목록 항목을 추가할 수 있습니다.
2. for를 사용하여 JavaScript 객체 리터럴 배열에서 모든 연습 문제를 찾아 파악합니다. 루프.
3. 목록 항목 안에 개별 운동 개체를 래핑합니다(<li></li> ) 태그.
4. 순서 없는 목록 요소(<ul></ul>) 내에서 브라우저의 목록 항목 HTML 요소를 출력합니다. ) 1단계에서 만든 것입니다.

1. 정렬되지 않은 빈 목록 요소 만들기

HTML에서 정렬되지 않은 빈 목록 요소를 설정하려면 index.html(또는 CodePen과 같은 것을 사용하는 경우 HTML 창) 안에 다음을 추가하세요.

<ul class="exercise-list"></ul>

이제 정렬되지 않은 목록에 대한 참조를 변수에 할당하여 나중에 정렬되지 않은 목록에 추가할 수 있습니다. 스크립트 파일 맨 위에 다음 코드를 추가하십시오.

let exerciseList = document.querySelector(".exercise-list");

2. 운동 개체 반복

배열 내부의 개별 운동 개체를 다루기 때문에 각 운동을 반복(반복)해야 작업을 수행할 수 있습니다.

JS 개체 바로 아래에 다음 코드를 추가하세요.

for (let exercise of exerciseList) {
  console.log(exercise.name);
}

전체 스크립트 파일은 이제 다음과 같아야 합니다.

let exerciseList = document.querySelector(".exercise-list");

let exerciseObjects = [
  {
    name: "Deadlift",
  },
  {
    name: "Push-up",
  },
  {
    name: "Pull-up",
  },
  {
    name: "Squat",
  },
];

for (exercise of exerciseObjects) {
  console.log(exercise.name);
}

이제 브라우저 콘솔을 확인하면 다음과 같이 표시됩니다.

이제 각 개별 운동 개체에 액세스할 수 있습니다.

3. HTML 목록 항목 요소 내에서 각 연습 래핑

이제 수집된 운동 항목을 list item 태그 안에 래핑해 보겠습니다.

먼저 for 루프가 시작되기 직전에 다음 변수를 추가합니다.

let exerciseItems = "";

이제 루프 내부에 다음을 추가하세요.

exerciseItems += "<li>" + exercise.name + "</li>";

이제 console.log(exerciseItems) (루프 외부 및 아래) 콘솔은 목록 항목 요소 안에 래핑된 각 운동 항목을 출력합니다.

4. 운동 목록에 운동 항목 추가

마지막으로, 운동 목록 요소 안에 운동 항목을 표시하려면 for 루프 바로 아래에 다음 코드를 추가하십시오.

exerciseList.innerHTML = exerciseItems;

모든 작업을 올바르게 수행했다면 정렬되지 않은 운동 목록이 이제 브라우저 창에 모든 운동 항목을 표시해야 합니다.

다음은 참조로 작성한 모든 코드입니다.

(function() {
  let exerciseList = document.querySelector(".exercise-list");

  let exerciseObjects = [
    {
      name: "Deadlift",
    },
    {
      name: "Push-up",
    },
    {
      name: "Pull-up",
    },
    {
      name: "Squat",
    },
  ];

  let exerciseItems = "";

  for (exercise of exerciseObjects) {
    exerciseItems += "<li>" + exercise.name + "</li>";
  }

  exerciseList.innerHTML = exerciseItems;
})();

다음은 모든 작업 코드가 포함된 CodePen입니다.