从Jinja的阵列中获取四个随机物品

Question

目的

• 如果{{content.name}}，则在阵列中大约100个课程的总列表中显示四个随机高尔夫球场。
• 需要切换的关键数据是{{content.slug}}，这是高尔夫球场的名称和带连字符的子弹名称<div class="explore__courses"> {% for content in COPY.courses if content.featured == "Featured" %} {% if loop.index <= 4 %} <div class="explore__course"> <a href="{{ COPY.content.project_url }}/courses/{{ content.slug }}/"><p class="explore__name">{{ content.name|random }}</p></a> <p class="explore__distance">tk-miles</p> <a href="{{ COPY.content.project_url }}/courses/{{ content.slug }}/"><img src="{{ COPY.content.cdn_url }}/courses/{{content.slug|random}}/{{content.slug|random}}-1.jpg" class="explore__image"></a> </div> {% endif %} {% endfor %} </div> <!-- .explore__courses --> 。

我已尝试使用此StackOverflow question中的随机过滤器，但我似乎只是获得了课程名称的第一个字母。如果没有过滤器，我只需要获得数组中的前四个课程。

的index.html

var locations = [

        {
            "name": "Aberdeen",
            "slug": "aberdeen",
            "lat": "38.533695",
            "lng": "-90.619151",
            "address": "4111 Crescent Rd, Eureka, MO 63025",
            "state": "MO",
            "holes": "18"
        },

        {
            "name": "Acorns",
            "slug": "acorns",
            "lat": "38.294035",
            "lng": "-90.199375",
            "address": "3933 Ahne Rd, Waterloo, IL 62298",
            "state": "IL",
            "holes": "18"
        },

        {
            "name": "American Legion",
            "slug": "american-legion",
            "lat": "38.803961",
            "lng": "-89.965593",
            "address": "58 IL-157, Edwardsville, IL 62025",
            "state": "IL",
            "holes": "9 "
        },

        {
            "name": "Annbriar",
            "slug": "annbriar",
            "lat": "38.349734",
            "lng": "-90.203934",
            "address": "1524 Birdie Ln, Waterloo, IL 62298",
            "state": "IL",
            "holes": "18"
        },

        {
            "name": "Arlington",
            "slug": "arlington",
            "lat": "38.7079279",
            "lng": "-90.0379311",
            "address": "200 Arlington Dr, Granite City, IL 62040",
            "state": "IL",
            "holes": "18"
        },

        {
            "name": "Ballwin",
            "slug": "ballwin",
            "lat": "38.605788",
            "lng": "-90.538963",
            "address": "333 Holloway Rd, Ballwin, MO 63011",
            "state": "MO",
            "holes": "9 "
        },

        {
            "name": "Bear Creek",
            "slug": "bear-creek",
            "lat": "38.817943",
            "lng": "-90.896974",
            "address": "158 Bear Creek Dr, Wentzville, MO 63385",
            "state": "MO",
            "holes": "18"
        },

        {
            "name": "Bear Creek Valley ",
            "slug": "bear-creek-valley",
            "lat": "38.153609",
            "lng": "-92.600756",
            "address": "910 MO-42, Osage Beach, MO 65065",
            "state": "MO",
            "holes": "18"
        },
];

示例课程数据

@XmlAccessorType(XmlAccessType.FIELD)
@XmlRootElement
public class PlainOldJavaObject implements Serializable {

    private long uuid;
    private String name;

    public PlainOldJavaObject() {
    }

    public long getUuid() {
        return this.uuid;
    }

    public void setUuid(long uuid) {
        this.uuid = uuid;
    }

    public String getNamen() {
        return this.name;
    }

    public void setName(String name) {
        this.name = name;
    }

    /* Omitted HashCode & Equals for brevity. */
}