1"use strict";(self.webpackChunkdocs_site=self.webpackChunkdocs_site||[]).push([["5917"],{1426(e,n,t){t.r(n),t.d(n,{metadata:()=>s,default:()=>p,frontMatter:()=>o,contentTitle:()=>r,toc:()=>d,assets:()=>a});var s=JSON.parse('{"id":"template-language/loops","title":"Jinja2 Loops (for)","description":"Repeat template sections for lists and arrays using Jinja2 for loops. Covers simple loops, nested loops, loop variables, and key-value iteration.","source":"@site/docs/template-language/loops.md","sourceDirName":"template-language","slug":"/template-language/loops","permalink":"/docs/template-language/loops","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"sidebar_position":4,"title":"Jinja2 Loops (for)","description":"Repeat template sections for lists and arrays using Jinja2 for loops. Covers simple loops, nested loops, loop variables, and key-value iteration.","keywords":["Jinja2 loops","for loop","iterate list","nested loop","loop.index","template loops","repeat content"]},"sidebar":"docsSidebar","previous":{"title":"Jinja2 Conditions (if/elif/else)","permalink":"/docs/template-language/conditions"},"next":{"title":"Jinja2 Default Filters","permalink":"/docs/template-language/filters"}}'),l=t(4848),i=t(8453);let o={sidebar_position:4,title:"Jinja2 Loops (for)",description:"Repeat template sections for lists and arrays using Jinja2 for loops. Covers simple loops, nested loops, loop variables, and key-value iteration.",keywords:["Jinja2 loops","for loop","iterate list","nested loop","loop.index","template loops","repeat content"]},r="Loops",a={},d=[{value:"Simple loop",id:"simple-loop",level:2},{value:"Looping over objects",id:"looping-over-objects",level:2},{value:"Nested loops",id:"nested-loops",level:2},{value:"Loop variables",id:"loop-variables",level:2},{value:"Iterating over key-value pairs",id:"iterating-over-key-value-pairs",level:2},{value:"Next steps",id:"next-steps",level:2}];function c(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"loops",children:"Loops"})}),"\n",(0,l.jsx)(n.p,{children:"Loops let you repeat a section of your template for each item in a list. This is essential for line items, tables, product lists, and any repeating content."}),"\n",(0,l.jsx)(n.h2,{id:"simple-loop",children:"Simple loop"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-json",children:'{\n "products": ["Apple Juice", "Orange Juice", "Pineapple Juice"]\n}\n'})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:"<ul>\n{% for product in products %}\n <li>{{ product }}</li>\n{% endfor %}\n</ul>\n"})}),"\n",(0,l.jsx)(n.p,{children:"Output:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:"<ul>\n <li>Apple Juice</li>\n <li>Orange Juice</li>\n <li>Pineapple Juice</li>\n</ul>\n"})}),"\n",(0,l.jsx)(n.h2,{id:"looping-over-objects",children:"Looping over objects"}),"\n",(0,l.jsx)(n.p,{children:"When your list contains objects (dictionaries), you can access their properties:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-json",children:'{\n "items": [\n {"name": "Widget A", "price": "$10.00"},\n {"name": "Widget B", "price": "$25.00"},\n {"name": "Widget C", "price": "$15.00"}\n ]\n}\n'})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:"<table>\n <thead>\n <tr>\n <th>Item</th>\n <th>Price</th>\n </tr>\n </thead>\n <tbody>\n {% for item in items %}\n <tr>\n <td>{{ item.name }}</td>\n <td>{{ item.price }}</td>\n </tr>\n {% endfor %}\n </tbody>\n</table>\n"})}),"\n",(0,l.jsx)(n.h2,{id:"nested-loops",children:"Nested loops"}),"\n",(0,l.jsx)(n.p,{children:"You can nest loops for more complex data structures:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-json",children:'{\n "departments": [\n {\n "name": "Engineering",\n "members": ["Alice", "Bob"]\n },\n {\n "name": "Design",\n "members": ["Carol", "Dave"]\n }\n ]\n}\n'})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:"{% for dept in departments %}\n <h3>{{ dept.name }}</h3>\n <ul>\n {% for member in dept.members %}\n <li>{{ member }}</li>\n {% endfor %}\n </ul>\n{% endfor %}\n"})}),"\n",(0,l.jsx)(n.h2,{id:"loop-variables",children:"Loop variables"}),"\n",(0,l.jsxs)(n.p,{children:["Inside a ",(0,l.jsx)(n.code,{children:"{% for %}"})," loop, Jinja2 gives you some useful built-in variables:"]}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Variable"}),(0,l.jsx)(n.th,{children:"Description"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"loop.index"})}),(0,l.jsx)(n.td,{children:"Current iteration (1-based)"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"loop.index0"})}),(0,l.jsx)(n.td,{children:"Current iteration (0-based)"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"loop.first"})}),(0,l.jsxs)(n.td,{children:[(0,l.jsx)(n.code,{children:"True"})," if this is the first iteration"]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"loop.last"})}),(0,l.jsxs)(n.td,{children:[(0,l.jsx)(n.code,{children:"True"})," if this is the last iteration"]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"loop.length"})}),(0,l.jsx)(n.td,{children:"Total number of items"})]})]})]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'{% for item in items %}\n <tr class="{% if loop.last %}last-row{% endif %}">\n <td>{{ loop.index }}</td>\n <td>{{ item.name }}</td>\n </tr>\n{% endfor %}\n'})}),"\n",(0,l.jsx)(n.h2,{id:"iterating-over-key-value-pairs",children:"Iterating over key-value pairs"}),"\n",(0,l.jsx)(n.p,{children:"To loop over a dictionary's keys and values:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-json",children:'{\n "fruit": [\n {"key": 1, "value": "Apple"},\n {"key": 2, "value": "Banana"},\n {"key": 3, "value": "Orange"}\n ]\n}\n'})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:"{% for item in fruit %}\n {% for key, value in item.items() %}\n {{key}}: {{value}}\n {% endfor %}\n{% endfor %}\n"})}),"\n",(0,l.jsx)(n.h2,{id:"next-steps",children:"Next steps"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.a,{href:"/template-language/filters",children:"Filters"})," \u2014 transform and format data"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.a,{href:"/template-language/apitemplate-filters",children:"APITemplate.io Filters"})," \u2014 dates, currency, QR codes, and more"]}),"\n"]})]})}function p(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(c,{...e})}):c(e)}},8453(e,n,t){t.d(n,{R:()=>o,x:()=>r});var s=t(6540);let l={},i=s.createContext(l);function o(e){let n=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:o(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.