使用带有 nunjucks 和 json 的 if/else 循环遍历 for 语句答案

【问题标题】：loop through a for statement using an if/else with nunjucks and json使用带有 nunjucks 和 json 的 if/else 循环遍历 for 语句
【发布时间】：2020-05-02 19:38:33
【问题描述】：

我正在尝试使用 nunjucks 遍历嵌套的 json 文件，为每个对象类型提供特定的布局并根据日期对所有对象进行排序。

所以就我而言，我有两个收藏活动和视频。这两个系列都将包含一系列活动和视频。

我的文件名为 /content.json，结构如下：

{
    media: {
        events: [
            {
            content_id: "1",
            content_type: "event",
            date: "01-11-2019",
            etc: "etc"
            },
            {
            content_id: "2",
            content_type: "event",
            date: "01-08-2019",
            etc: "etc"
            }
        ],
        videos: [
            {
            content_id: "3",
            content_type: "video",
            date: "01-12-2019",
            etc: "etc"
            },
            {
            content_id: "4",
            content_type: "video",
            date: "01-09-2019",
            etc: "etc"
            }
        ]
    }
}

我尝试使用 if/else 语句获取分配的不同对象，然后使用 for 循环在数组中循环，但失败了，见下文：

{% for item in content.media %}
    {% if item == events %}
        {% for item in content.media.events %}
                {% include "components/event.njk" %}
        {% endfor %}
    {% elif item ==  video %}
        {% for item in content.media.videos %}
                {% include "components/video.njk" %}
        {% endfor %}
    {% endif %}
{% endfor %}

我从未尝试按日期对所有内容进行排序，但我发现：

{% for item in items|sort(attribute='date')%}

谁能指引我正确的方向？

提前致谢。

AENM

【问题讨论】：

{% for event in content.media.events %}...{% endfor %} {% for video in content.media.videos %}...{% endfor %}?
Thnx Aikon，我确实有这个解决方案并且它有效。但我想按日期对所有内容进行排序。并且知道 nunjucks 提供了一个排序选项，所有内容都应该在一个 for 语句中。也许你说，这是不可能的，你需要一些 javascript 来进行排序。或者您有其他解决方案？

标签： json for-loop if-statement nunjucks eleventy

【解决方案1】：

此代码按元素类型（事件或视频）输出单独的提要。

{% for event in content.media.events | sort(attribute = 'date') %}
    {% include "components/event.njk" %}
{% endfor %}

{% for video in content.media.videos | sort(attribute = 'date') %}
    {% include "components/video.njk" %}
{% endfor %}

如果您需要输出混合提要，您应该将数组连接到一个并运行它（幸运的是每个元素都已经具有类型）：

{% for item in [].concat(content.media.events, content.media.videos) | sort(attribute = 'date') %}
    {% include "components/" + item.content_type + ".njk" %}
{% endfor %}

【讨论】：

感谢 Aikon，我尝试了第一个并且成功了，但我不得不更改为 sort('date')。第二个返回一个错误，说：TemplateContentRenderError was throwed > (./site/index.njk) Error: template not found: components/undefined.njk。我对其进行了测试，并且与 concat 函数有关。它不能正常工作？ :-(
我修复了“错误”：您的数据不满足 type-field 而是 content_type。
见我上面的回答。它是 content.media，它必须是 media.content。现在一切正常！
是的，正确的。但我不想深入，因为这更像是一种线框类型的构建。但我可能不得不对 moment.js 和 github.com/techmsi/nunjucks-date 做点什么。再次感谢您的提示和帮助。

【解决方案2】：

艾康，

我现在明白了！！这是另一个错字，你切换了媒体和事件。（你有没有试图让我保持敏锐？！:-)）但这就是 concat 不起作用的原因！所以这是最终的工作结果：

{% for item in [].concat(media.content.events, media.content.videos) | sort(attribute = 'date') %}
     {% include "components/" + item.type + ".njk" %}
{% endfor %}

只有日期的顺序不正确，但我认为这与我的网格设置有关。

谢谢你帮助我......

【讨论】：

我认为您有日期问题，因为 nunjucks 将 events.date 比较为字符串，而不是日期。所以你应该创建自己的自定义过滤器而不是标准的sort。