在 jinja 中进行 1 次迭代后，如何在循环后中断？答案

【问题标题】：How can I break after the loop after 1 iteration in jinja?在 jinja 中进行 1 次迭代后，如何在循环后中断？
【发布时间】：2021-07-02 06:49:20
【问题描述】：

在烧瓶应用程序中创建的图表中。我必须遍历字典和列表。我现在有这个。

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 %}
                            ]                 
                    }],

前 10 名 = {"a":10,"b":15,"c":5,"d":8,"e":4,..} 和颜色 = [“蓝色”、“黑色”、“红色”...]

当前输出：{ x: "a", y: 10, fill = "blue" }, { x: "a", y: 10, fill = "black" }, ....

循环的预期输出是：{ x: "a", y: 10, fill = "blue" }, { x: "b", y: 15, fill = "black" },....

【问题讨论】：

那么发生了什么？这不工作吗？或者，您在使用这种方法时是否遇到任何错误？而且，在第一次迭代后，您需要中断哪个循环，是带有 dict 的外循环还是带有列表的内循环？您期望的输出是什么？
如果你破坏了colors，你将得到每个Top10的相同（第一个）颜色。你的意思是问如何同时迭代两个序列？浏览Top10 时如何循环颜色？请澄清您的问题，即您预计会发生什么。
看到这个帖子：stackoverflow.com/a/22150349/3871639
另外，您似乎正在尝试在模板中呈现 JSON。这不是一个好方法。在控制器中构建您的数据，作为 Python 列表/字典，然后只需执行 {{ data | tojson }}。以您的方式构建 JSON 可能会导致格式错误（更不用说它更难阅读和维护）。这似乎是XY problem。

标签： python flask charts syncfusion syncfusion-chart

【解决方案1】：

根据您的预期输出，您真的不希望在 Top10 项目中嵌套 for 颜色循环。似乎您想要 Top10 项目与颜色的一对一映射。如果是这样，@Sefan 在答案中给出了一些线索。这里我可以用 Flask 和 Jinja 的方式给你完整的例子。

在您看来，假设app.py，您可以压缩您的两个数据对象，如下所示：

@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))

在您的模板中，假设breakloop.html：

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

结果：

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

【讨论】：

【解决方案2】：

您可以使用 zip 和 iteritems() 来压缩字典和列表。并循环通过压缩列表。

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)

【讨论】：

这对我有用，谢谢。我只做了一项更改，即我使用项目而不是 iteritems。

【解决方案3】：

我们已根据您的要求准备了样品。为此，我们根据您的要求创建了数据。

  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>

示例链接：https://stackblitz.com/edit/angular-tjjts9?file=app.component.html

【讨论】：