[81] render / 배열안 객체를 html로 출력

 

문제

 

 

• todos 배열을 전달받아 html 형식의 문자열을 생성해 반환한다.
  • for 문, for…in 문, for…of 문은 사용하지 않는다.

const render = todos => { /* Do something */ };

const todos = [
  { id: 3, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: false }
];

console.log(render(todos));
/*
'<li id="3">
	<label><input type="checkbox">HTML</label>
</li>
<li id="2">
  <label><input type="checkbox" checked>CSS</label>
</li>
<li id="1">
  <label><input type="checkbox">Javascript</label>
</li>'
*/

 

 

 

---

풀이

배열을 html로 출력하는 문제

 

맵과 백틱을 이용해 배열을 순회해 html 형식의 문자열을 생성해 반환.

백틱안 줄바꿈에 따라 출력되는 내용도 달라짐.

const result1 자리에 바로 return을 쓰면 되지만 결과를 콘솔로 보고싶어서 변수로 할당함.

const render = todos => {
  const result1 = todos
    .map(todo =>
      ` 
      <li id=${todo.id}>
         <label><input type="checkbox" ${todo.completed}>${todo.content}</label>
      </li> `
    ).join('')
  console.log(result1);
};

const todos = [
  { id: 3, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: false }
];

console.log(render(todos));


--------------------------
//print
      <li id=3>
         <label><input type="checkbox" false>HTML</label>
      </li>  
      <li id=2>
         <label><input type="checkbox" true>CSS</label>
      </li>  
      <li id=1>
         <label><input type="checkbox" false>Javascript</label>
      </li>

 

 

처음 여는 백틱`  옆에 바로 태그를 작성하면 아래와 같이 출력됨

const render = todos => {
  const result1 = todos
    .map(todo =>
      ` <li id=${todo.id}>
         <label><input type="checkbox" ${todo.completed}>${todo.content}</label>
      </li> `
    ).join('')
  console.log(result1);
};


--------------------------
//print
<li id="3">
 <label label > <input type="checkbox" >HTML</label>
       </li ><li id="2">
         <label><input type="checkbox" checked>CSS</label>
       </li><li id="1">
         <label><input type="checkbox" >Javascript</label>
       </li>