스크립트가 읽는 키

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를 읽고, 필요한 것을 제공하세요.

tasks/templates/tasks/home.html에서 스크립트 태그 위에 스크립트가 찾는 id가 있는 요약 문단을 추가하세요.
tasks/views.py의 stats 뷰에서 요약이 읽는 키를 추가하세요(app.js의 stats. 뒤에서 찾으세요). 이 키의 값은 완료되지 않은 작업의 수입니다.

‘실행’을 누르세요. 요약에 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>