Javascript 如何将数组渲染成特定的形式，以便胡须渲染

我通过API获得了一个带有图像位置的对象数组，但我无法渲染它

我设法用下划线将我的数组设置为4，但我不知道如何将我的数据转换成正确的形式，这样我就可以通过小胡子渲染出来

当前代码如下所示：

var template = "<ul>{{#images}}<li>{{location}}</li>{{/images}}</ul>";

var data = [
    {"location":"gallery\/Baar_Toit_5.jpg"},
    {"location":"gallery\/Baar_Toit_7.jpg"},
    {"location":"gallery\/Baar_Toit_8.jpg"},
    {"location":"gallery\/Baar_Int_1.jpg"},
    {"location":"gallery\/Baar_Int_2.jpg"},
    {"location":"gallery\/Baar_Int_3.jpg"},
    {"location":"gallery\/Baar_Int_4.jpg"},
    {"location":"gallery\/Baar_Uus_01.jpg"},
    {"location":"gallery\/Baar_Uus_02.jpg"},
    {"location":"gallery\/Baar_Uus_03.jpg"},
    {"location":"gallery\/Baar_Uus_04.jpg"},
    {"location":"gallery\/Baar_Uus_05.jpg"},
    {"location":"gallery\/Baar_Uus_06.jpg"},
    {"location":"gallery\/Baar_Uus_07.jpg"}
];

var n = 4;
var imgs = _.groupBy(data, function(element, index){
    return Math.floor(index/n);
});

console.log(imgs);

Mustache.parse(template);
var rendered = Mustache.render(template, { imgs: JSON.parse(imgs) });
$('#gallery').html(rendered);

<ul>
    {{#chunks}}
        <li>
            {{#.}}
                <p>{{location}}</p>
            {{/.}}
        </li>
    {{/chunks}}
</ul>

var-template=“
{{{images}}
{{location}
{{/images}
”；
风险值数据=[
{“地点”：“画廊\/Baar_Toit_5.jpg”}，
{“地点”：“画廊\/Baar_Toit_7.jpg”}，
{“地点”：“画廊\/Baar_Toit_8.jpg”}，
{“地点”：“画廊\/Baar_Int_1.jpg”}，
{“地点”：“画廊\/Baar_Int_2.jpg”}，
{“地点”：“画廊\/Baar_Int_3.jpg”}，
{“地点”：“画廊\/Baar_Int_4.jpg”}，
{“地点”：“画廊\/Baar_Uus_01.jpg”}，
{“地点”：“画廊\/Baar_Uus_02.jpg”}，
{“地点”：“画廊\/Baar_Uus_03.jpg”}，
{“地点”：“画廊\/Baar_Uus_04.jpg”}，
{“地点”：“画廊\/Baar_Uus_05.jpg”}，
{“地点”：“画廊\/Baar_Uus_06.jpg”}，
{“地点”：“画廊\/Baar_Uus_07.jpg”}
];
var n=4；
var imgs=uu.groupBy（数据、函数（元素、索引）{
返回数学楼层（索引/n）；
});
控制台日志（imgs）；
parse（模板）；
var rendered=Mustache.render（模板，{imgs:JSON.parse（imgs）}）；
$（'#gallery'）.html（呈现）；

我创建了一个用于测试的小沙盒，可以随意使用它：

我期望的输出是：

<ul>
    <li>
        <p>img/1.jpg</p>
        <p>img/2.jpg</p>
        <p>img/3.jpg</p>
        <p>img/4.jpg</p>
    </li>
    <li>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
    </li>
    <li>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
    </li>
    <li>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
    </li>
</ul>

img/1.jpg

img/2.jpg

img/3.jpg

img/4.jpg



img/5.jpg

img/6.jpg

img/5.jpg

img/6.jpg



img/5.jpg

img/6.jpg

img/5.jpg

img/6.jpg



img/5.jpg

img/6.jpg

任何帮助都将不胜感激

不是这个工作的合适工具，对象没有在JavaScript中排序，因此不能保证您将以正确的顺序获得块。是的，这意味着分块的方法是错误的

因此，您的第一个问题是正确地分块数据。如果你用的是lodash，你可以用它的。如果您使用的是纯下划线，则可以混合使用自己的

\u0.chunk

，并且可以轻松调整lodash版本：

_.mixin({
    chunk: function(a, n) {
        // Based on lodash's
        var i = 0, length = a.length, ri = -1;
        var result = Array(Math.ceil(length / n));
        while(i < length)
            result[++ri] = a.slice(i, i += n);
        return result;
    }
});

然后您要将

块

交给模板：

var rendered = Mustache.render(template, {
    chunks: chunks
});

最后，您的模板需要在块上迭代以生成

s，然后在
中的每个块上迭代以生成
s。看起来是这样的：

var template = "<ul>{{#images}}<li>{{location}}</li>{{/images}}</ul>";

var data = [
    {"location":"gallery\/Baar_Toit_5.jpg"},
    {"location":"gallery\/Baar_Toit_7.jpg"},
    {"location":"gallery\/Baar_Toit_8.jpg"},
    {"location":"gallery\/Baar_Int_1.jpg"},
    {"location":"gallery\/Baar_Int_2.jpg"},
    {"location":"gallery\/Baar_Int_3.jpg"},
    {"location":"gallery\/Baar_Int_4.jpg"},
    {"location":"gallery\/Baar_Uus_01.jpg"},
    {"location":"gallery\/Baar_Uus_02.jpg"},
    {"location":"gallery\/Baar_Uus_03.jpg"},
    {"location":"gallery\/Baar_Uus_04.jpg"},
    {"location":"gallery\/Baar_Uus_05.jpg"},
    {"location":"gallery\/Baar_Uus_06.jpg"},
    {"location":"gallery\/Baar_Uus_07.jpg"}
];

var n = 4;
var imgs = _.groupBy(data, function(element, index){
    return Math.floor(index/n);
});

console.log(imgs);

Mustache.parse(template);
var rendered = Mustache.render(template, { imgs: JSON.parse(imgs) });
$('#gallery').html(rendered);

<ul>
    {{#chunks}}
        <li>
            {{#.}}
                <p>{{location}}</p>
            {{/.}}
        </li>
    {{/chunks}}
</ul>


{{{#块}

{{#.}}
{{location}}

{{/.}}

{{/chunks}


演示：
除了示例调用返回的对象上的
.toArray
，因此您将返回一个有序数组。@ColinDeClue:但是
。
不保证它将按键对
some\u对象进行排序，
toArray
只需在对象上迭代，并以任何顺序为您提供值。每个
都会使用（即根本没有指定顺序）。将
toArray
调用添加到
groupBy
上并不能解决订单问题。@mu太短了：谢谢你这么好的回答@缪斯托肖特：啊，我以为它会从物体的按键上脱落。但是，是的，只有当键总是数字时，这才有效，这不能保证。@ColinDeClue：键总是字符串，但键是什么并不重要，因为任何地方都没有对它们进行排序。对象的键没有顺序，
toArray
在内部使用
.values
和
.keys
（至少当前版本是这样），并且这两个键都不会对键进行排序（如果它们这样做，则会出错，因为键是字符串，
'2'
和
'11'
与数字排序不同）。另一个实现依赖于意外和未指定的行为，因此它是错误的。