How do I displaying a list of multiple objects, one below the other, in HTML using Django?

Question

I'm really new to HTML and CSS, so this is probably a really basic question:

Let’s say I have a page where I'm displaying books (with all the information associated with a book- like an image, name, isbn). Sometimes I'll have 1 book, other times I'll have 3 or 6 and so forth.

I know how to display one book using CSS and HTML, but how do I display and position multiple books? I want the first book to appear at the top of the page and subsequent books to appear below it - how do I achieve this?

The information is coming from a database and is on the HTML page through a Django template - so I have template tags like {{ author|safe }} that holds each (in this case) author's name.

This is the code that I have in the Django template:

<html>
<head>
<body>
<h1>Testing the class page backend</h1>

<ul>
{% for edition in editions %}
    <li>{{ edition|safe }}</li>
{% endfor %}
{% for image in images %}
    <li>{{ image|safe }}</li>
{% endfor %}
{% for author in authors %}
    <li>{{ author|safe }}</li>
{% endfor %}
{% for book_title in book_titles %}
    <li>{{ book_title|safe }}</li>
{% endfor %}
</ul>

</body> 

</html>

errr, just repeat the code? Can we see an example, maybe code it up in [jsfiddle](http://jsfiddle.net/) — Alex, Sep 14 '11 at 09:04
how are you displaying your books in page? some script or php or where does that books list come from? — Gatekeeper, Sep 14 '11 at 09:05
If enclose every book in block elements like
they will automatically be under each other. If this is what you ask — friendzis, Sep 14 '11 at 09:12
the issue with repeating the code is that I don't know how many books I'm going to have to display- I know I need a for loop and I know how to display one book, I'd like to display all books for which I pass in information with the same formatting, except at a different position — praks5432, Sep 14 '11 at 09:13
@praks5432 I notice the inclusion of the 'django' tag now. Is that the technology you're using? — Alex, Sep 14 '11 at 09:15
sorry- that's badly named- book refers to the name of the book- so the information that comes in at index 0 of all the querysets refers to the first book and needs to be displayed together — praks5432, Sep 14 '11 at 09:24
@praks5432: ah, okay. That does seem like a weird way to organise your context data. I’ve posted an answer below discussing that. — Paul D. Waite, Sep 14 '11 at 09:29

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

I’m a bit confused by your Django template code. You say you can have any number of books displayed on the page. What context are you passing to your Django template?

Judging from your template code, it seems like you’ve got separate lists for each property — one list for all the images of all the books, one list for all the authors, etc.

I would have thought it would make more sense to have a list of book objects, where each book has its properties as, y’know, properties. E.g.

<ul>{% for book in books %}
    <li>
        <h2>{{ book.title|safe }}</h2>

        <p>by {{ book.author|safe }}</p>

        <p>{{ book.image }}</p>


        <h3>Editions</h3>

        <ul>{% for edition in book.editions %}
            <li>{{ edition|safe }}</li>
        </ul>
    </li>{% endfor %}
</ul>

Of course, that might not make sense for your back-end, but at the moment I can’t quite see what your problem actually is.

Edit:

I think I understand your context now. This really isn’t an HTML issue, it’s a Django template issue. Because you’ve got separate lists for each property of your books (instead of a list of book objects), you need to loop through those indexes. Because the Django template language doesn’t have a built-in equivalent of Python’s range function, you’d have to either use a custom template tag, or pop a list of the indexes into your context (e.g. context['indexes'] = len(context['editions'])).

But I would have thought it’d be a bit more Django-y just to pass a list of book objects to your template, as I suggested above.

edited May 23 '17 at 11:57

Community

1
1

answered Sep 14 '11 at 09:27

Paul D. Waite

96,640
56
199
270

my problem is displaying that information with css in html? Lets say I have an 'object' in html that I know how to format and display, I'd like to display multiple instances of that object with the same formatting, but different content- css is dependent on the selectors that I set down to be formatted- but I don't know how to repeat those selectors at different positions – praks5432 Sep 14 '11 at 09:31
@praks5432: I don’t quite understand what you’re saying. The way to have multiple instances of an HTML structure with different content is to literally have multiple instances of it. Say you have three book titles, and you want them each displayed in a `
`. Your Django template code should produce the following text: `
Book Title 1
Book Title 2
Book Title 2
`. It’s nothing to do with CSS.
– Paul D. Waite Sep 14 '11 at 09:38
1

thanks Paul! I actually think this way of organizing it is better- so I'm going to try re-writing it and then displaying it- in your example, you have html tags repeating with the for loop - I didn't know I could do this- so thanks! – praks5432 Sep 14 '11 at 09:39
@praks5432: You’re most welcome! Yup — I put a comment on another answer relating to this, but the Django template language `{% for %}` loop outputs its HTML content once for each item passed to it. So as you can see, this is really a Django template issue, not an HTML issue. – Paul D. Waite Sep 14 '11 at 09:43
sorry- I should've been more clear - I wanted to have multiple instances, but have them generated through a for loop- I didn't know that you could repeat html tags with a for loop – praks5432 Sep 14 '11 at 09:46
@praks5432: That’s alright, it’s difficult to know what to ask when you’re new to things. – Paul D. Waite Sep 14 '11 at 10:48

score 0 · Answer 2 · answered Sep 14 '11 at 09:04

Where are the books come from? You have a database or something like that to fill your page? Anyway, you probably need to write a loop through an array of books and output something like an HTML ordered or unordered ( or ) list. But since you are really new to HTML and CSS I don't really know if this answers your question.

Gatekeeper · Answer 3 · 2011-09-14T09:42:47.873

0

I'm trying to display the same format for each book, except at a different position with different content

then just make css class for some element (like DIV) and put every book to <div class="yourClass"></div>

in jsp i do it like this:

<c:forEach var="catEntry" items="${arrayOfProducts}" varStatus="status">
<div class="product">product content</div>
</c:foreach>

edited Sep 14 '11 at 09:42

answered Sep 14 '11 at 09:15

Gatekeeper

1,586
3
21
33

ok, but how do I make it so that each new book is displayed below the previous? – praks5432 Sep 14 '11 at 09:16
also, doesn't that involve me hard coding a div class = "yourClass"? I don't know how many books I'm going to display – praks5432 Sep 14 '11 at 09:17
use
– Gatekeeper Sep 14 '11 at 09:18
if you dont know how many books, HOW you actually add them to site? This is critical to know – Gatekeeper Sep 14 '11 at 09:19
well I have a for loop that goes through all hte information - the entry in index 0 of each querySet refers to the 1st book and I need to display this information together, the information at 1 refers to the second book and this needs to be together and needs to be displayed below the first book with the same formatting – praks5432 Sep 14 '11 at 09:23
and where is the problem with writing
to html in each iteration of your loop? – Gatekeeper Sep 14 '11 at 09:25
wait- so if I put in div tags inside of a for lop- they'll repeat? – praks5432 Sep 14 '11 at 09:32
1

@praks5432: “if I put in div tags inside of a for lop- they'll repeat?”. If you have a Django `{% for %}` loop, then yes, all the HTML inside it will be repeated for each item passed to the for loop. The Django template language is parsed on the server, populated with the data from the Django context sent to it by the view function, and produces HTML as its output. – Paul D. Waite Sep 14 '11 at 09:41

How do I displaying a list of multiple objects, one below the other, in HTML using Django?

3 Answers3

Edit: