스크립트가 읽는 키

Coddy Django 여정의 JSON API 섹션에 포함된 레슨. 19개 중 13번째.

새 app.js는 /api/stats/에서 가져온 데이터를 바탕으로 목록 위에 요약을 추가합니다. 스크립트와 Django 쪽은 이름으로 연결됩니다. 즉, 스크립트가 페이지에서 찾는 id와 JSON에서 읽는 키입니다.

const stats = await response.json();
summary.textContent = stats.open + " open, " + stats.done + " done";

stats.done은 JSON에서 "done" 키를 읽습니다. JSON에 없는 키를 읽어도 오류는 발생하지 않습니다. JavaScript는 이를 undefined로 읽고 페이지에 그 단어를 출력합니다. id가 없을 때도 조용히 실패하며, 브라우저 콘솔에만 오류가 표시됩니다. 그러니 먼저 스크립트를 읽으세요. 스크립트에 있는 이름을 글자 하나까지 그대로 사용해야 합니다.

챌린지

중급

새 app.js를 읽고, 필요한 것을 제공하세요:

홈 페이지에서 스크립트가 조회하는 id를 가진 요약 문단을 스크립트 태그 위에 추가하세요.
/api/stats/에서 요약이 완료되지 않은 작업에 대해 읽는 키를 total 및 done과 함께 추가하세요.

실행을 누르세요. 요약에 2 open, 1 done이 표시됩니다.

직접 해보기

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Task tracker</title>
</head>
<body>
    <h1>Task tracker</h1>
    <ul id="task-list"></ul>
    <script src="{% static 'tasks/app.js' %}"></script>
</body>
</html>