How can I break after the loop after 1 iteration in jinja?

Question

In a chart created in flask application. I have to loop through a dictionary as well as a list. I have this as of now.

series:
                    [{
                            points: [
                            
                            {% for key, value in Top10.items() %}
                                {% for color in colors%}
                                       { x: "{{key}}", y: {{ value }}, fill = "{{ color }}" }, //"" as it is a string
                                    {% endfor %}
                                {% endfor %}
                            ]                 
                    }],

Top 10 = {"a":10,"b":15,"c":5,"d":8,"e":4,..} and Colors = ["blue", "black", "red"...]

Current output : { x: "a", y: 10, fill = "blue" }, { x: "a", y: 10, fill = "black" }, ....

Expected output for the loop is : { x: "a", y: 10, fill = "blue" }, { x: "b", y: 15, fill = "black" },....

So what's happening? Is this not working? Or, are you getting any errors with this approach? And, which loop do you need to break after 1st iteration, is it the outer loop with the dict or the inner loop with the list? What is the output which you expect? — AKS, Jul 02 '21 at 06:50
If you break `colors`, you will get the same (first) colour for every `Top10`. Do you mean to ask how to simultaneously iterate on two sequences? How to cycle colours as you go through `Top10`? Please clarify your question as to what you expect to happen. — Amadan, Jul 02 '21 at 06:51
Also, you seem to be trying to render a JSON inside a template. This is not a good approach. Build your data in the controller, as a Python list/dict, then simply do `{{ data | tojson }}`. Building JSON the way you are risks it being malformed (not to even mention it being harder to read and maintain). This seems to be an [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). — Amadan, Jul 02 '21 at 06:56

score 2 · Answer 1 · answered Jul 02 '21 at 07:19

2

You can use zip and iteritems() to zip the dictionary and the list. And the loop through the zipped list.

Top10 = {"a":10,"b":15,"c":5,"d":8,"e":4}
Colors = ["blue", "black", "red"]
Zipped = zip(Top10.iteritems(), Colors)

for (key, value), color in Zipped:
    print(key,value,color)

answered Jul 02 '21 at 07:19

Sefan

699
1
8
23

1

This worked for me thank you. I just made one change i.e., I used items instead of iteritems. – Shravya Mutyapu Jul 02 '21 at 11:02

score 2 · Accepted Answer · answered Jul 02 '21 at 09:02

Based on your expected output, you dont really want to have nested for loop of colours within Top10 items. It seems you want a one to one map of Top10 items to colours. If that's the case, @Sefan has given some clue in the answer. Here i can give you the full example in Flask and Jinja way.

In your view, let's say app.py, you can zip your two data object as below:

@app.route('/breakloop')
def breakloop():
    Top10 =  {"a":10,"b":15,"c":5,"d":8,"e":4}
    colors = ["blue", "black", "red"]

    return render_template('breakloop.html', zipped=zip(Top10.items(), colors))

In your template, let's say breakloop.html:

{% for (key, value), color in zipped %}
        { x: "{{key}}", y: {{ value }}, fill = "{{ color }}" }, </br> 
{% endfor %}

Results:

{ x: "a", y: 10, fill = "blue" }, 
{ x: "b", y: 15, fill = "black" }, 
{ x: "c", y: 5, fill = "red" },

score 0 · Answer 3 · answered Jul 05 '21 at 12:31

We have prepared a sample based on your requirement. In that, we have created data based on your requirement.

  public top10: Object = { a: 10, b: 15, c: 5, d: 8, e: 4 };
  public colors: string[] = ['blue', 'black', 'red', 'yellow', 'green'];
  public data: Object[] = this.getData();
  public getData(): Object[] {
    let count = 0;
    let currentData: Object[] = [];
    for (const [key, value] of Object.entries(this.top10)) {
      currentData.push({
        x: `${key}`,
        y: `${value}`,
        fill: this.colors[count++]
      });
    }
    count = 0;
    return currentData;
  }

<ejs-chart>
    <e-series-collection>
       <e-series [dataSource]='data' xName='x' yName='y' pointColorMapping="fill">
       </e-series>
     </e-series-collection>
</ejs-chart>

Sample link: https://stackblitz.com/edit/angular-tjjts9?file=app.component.html

How can I break after the loop after 1 iteration in jinja?

3 Answers3