Web Development With Flask: Iterate Through Individual List Elements

Today, I worked on a Flask powered project that required display of a JSON data set returned from an API call in the form of an HTML unordered list. In addition, the unordered list was to be displayed in a manner that allows users to view one list element at a time using Next and Back buttons. Fortunately, I was able to accomplish this using a Jinja template and jQuery.

The Process & Code

There are many methods to accomplishing the above task. I decided to take advantage of for loops with Jinja templates and class alternation with jQuery.

Obtaining The Dataset:

First, I created a route in my app.py for the API call. The /traveling route is taking a user’s input and routing them to either the destination.html template or the results.html template depending on the input from the user. For this post, we want to focus on the else condition where it’s calling the search function and taking a session variable as a parameter. The search function makes an API call using the session variable and the results, a JSON dataset, is saved to the variable results_home and passed to the results.html template for looping and display:

Iterating Through The Results:

One great advantage of using Jinja is that it allows for the use of control structures, for example loops, to manipulate data for display in HTML. For this particular task, we are using for loops and if statements to render data on an HTML page. This is particularly useful in our case as the size of the JSON object is dynamic and can vary with each API call. In our example, when the dataset results_home is passed to the results template, a for loop is used to iterate over the JSON object returned and allows us to access elements for display in the form of an unordered (UL) list. The for loop treats each element of the JSON object as an element in the UL as seen in the {% for results in results_home %} {% endfor %} block.

Adding List Navigation:

Now that we have our HTML list setup, we can examine the code that allows users to navigate through the list one list element at a time. There are many different approaches we could have taken to navigate through the list elements but for this particular project, I decided to use classes to hide and display elements based on order.

Using an if statement, as seen in the snippet below, the active class is assigned to the very first list element. The test class is applied to all other elements in the list.

Here is the corresponding css for the unordered list:

As shown in the css above, we are applying font and text formats to the entire list. Then, we are making all elements of the list hidden using display:none; with the exception of any element in the UL list that belongs to the active class.

After defining our UL list elements, we defined two buttons, one for capturing the next element and one for capturing the previous element in the list.

Moving onto the animation, at a high level, we are using jQuery to move the active class among the UL list elements depending on the user selection. As shown in the code snippet below, the script is using length analysis and the click method to remove the active class from the current active list element and adding it to the next list element, if the user selects Next, or adding it to the previous list element, if the user selects Back.

Finally, we are left with an interactive list display on the webpage:


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s