javascript - 循环嵌套 Handlebars 导入数组中的特定元素时出现问题

Question

<div class="sub_container">
<div class="logo-col"> </div>
<h2>Welcome to {{title}}</h2>
<script>

    function showDiv() {
        var Displayobj = "";
        var Finalobj = "";
            for (var i = 0; i < "{{projects.length}}"; i++) {
            Displayobj="{{projects.[i].[0]}}"+"'s current value is "+"{{projects.[i].[2]}}";
            Finalobj = Finalobj + "  |||  "+Displayobj;
            }
        document.getElementById('contentdiv').innerHTML = Finalobj;
        document.getElementById('contentdiv').style.display = "block";

}
    </script>

    <input type="button" value="Value per Item" id="MyButton" onclick="showDiv()" /> 
    <button type="button">Value per Center</button><button type="button">Amount of projects</button><button type="button">Potential of projects</button>
    <div id = "contentdiv" style = "display:none;" class="sub_cnt_col" >
    </div>

我要做的是指定 Handlebars 数组的哪些元素

 {{projects}}

根据我单击的按钮显示。现在我只完成了一个按钮，但是“{{projects.[i].[0]}}”
什么都不返回。在网页上我看到:

||| 's current value is ||| 's current value is ||| 's current value is
.  

但是如果我为“i”输入一个数字，例如 0，它就可以正常工作，但我需要它来遍历所有实例。
projects 包含这样的数组 ---->

projects=[[Computer,info,50],[Desk, info, 10],[Plane, info, 450]]  

编辑: {{projects[i][0]}} 不起作用 ---> 它只是下载一个空的 TextEdit 文件

编辑:我也发现了这个--->
<ul class="people_list"> {{#each projects}} <li>{{this}}</li> {{/each}} </ul>
但问题是它不显示特定元素。 AKA:项目应该只显示第一个和第三个元素，我不知道如何用这个 handlebars 助手指定。

编辑: 更奇怪的事情:如果我把它改成 {{projects[i][0]}}在网站的控制台中它显示加载资源失败:框架加载中断，即使我没有加载任何东西。

编辑:当我做 {{project[0][0]}}并在没有 for 循环的情况下对其进行硬编码，它可以正确获取所有内容，因此它必须专门与 for 循环有关，而不是无法访问数组。

编辑: 我想通了，我在 for 循环之外创建了另一个变量并将其命名为 i我注释掉了 for 循环，但它仍然不起作用，这意味着问题出在数组中，由于某种原因无法使用变量作为其索引。 仍然没有修复

编辑: 我的问题可能与缺少模板有关，因为我从未创建过模板，老实说也不一定知道如何创建。

编辑: 我的问题可能是我正在尝试使用 javascript 而不是 HTML 来遍历它，就像 chiliNUT 示例中的人使用的那样。但是我不知道如何只用 HTML 指定 1 个项目。

编辑:

   var indexController = {
    index:function(req, res){
        var data = {
            title: "whatever"
        };
        var exphbs  = require('express-handlebars');  
var hb = require('handlebars');
    // Creates the access token and uses the smartsheetSDK
    // specifies which sheet to go into
    var options = {
        id: 
    };
    var http = require('http');
    var rowIds = [];
    var dupcities = [];
    var cities = [];
    var projects = [];
    var finrow=0;
    var moneyDone = 0;
    var sheetRowlength=0;
    var ProjectsSortedintoCity=[];
    var moneymade=0;
    var ProjperCit = 0;
    // Gets the specific row
    /* jshint loopfunc:true */
    smartsheet.sheets.getSheet(options)
        .then(function (data0) {
            //gets the entire sheet, but only the rowIds are used
            for (var i = 0; i <= data0.rows.length-1;i++) {
                rowIds.push(data0.rows[i].id);
                //pushes/prints the row ids
                sheetRowlength =(data0.rows.length);
                options= {sheetId: 
                          rowId: data0.rows[i].id};
                          //sets a new options for the rows
                    //gets the row

                smartsheet.sheets.getRow(options)
                .then(function (data1) {
                     projects.push([]);
                        for( var b = 0; b < data1.cells.length; b++){
                        projects[finrow].push(data1.cells[b].value);
                    //prints out all the values of the row

                    }
                    dupcities.push(projects[finrow][4]);
                    finrow++;
                    if(projects.length===sheetRowlength){
                        var cities = dupcities.slice() // slice makes copy of array before sorting it
                         .sort(function(a,b){
                                return a > b;
                              })
                              .reduce(function(a,b){
                                if (a.slice(-1)[0] !== b){ a.push(b);}// slice(-1)[0] means last item in array without removing it
                                return a;
                              },[]);
                            for (var z = 0; z <cities.length; z++) {
                                ProjectsSortedintoCity.push([]);
                                ProjectsSortedintoCity[moneyDone].push(cities[z]);
                                for (var x= 0; x <projects.length; x++) {
                                    if(projects[x][4]===ProjectsSortedintoCity[moneyDone][0]){
                                    ProjperCit++;
                                     moneymade=moneymade+projects[x][40]+projects[x][41]+projects[x][42]+projects[x][43];
                                }
                                }
                                ProjectsSortedintoCity[moneyDone].push(moneymade);
                                ProjectsSortedintoCity[moneyDone].push(ProjperCit);
                                moneyDone++;
                                moneymade=0;
                                ProjperCit=0;

                            }

                        data.projects=ProjectsSortedintoCity;
                        data.cities=cities;
                        system.loadView(res,'index', data);

                    }


            })
            .catch(function (error){
                    console.log(error);
                    data.error=true;
                    system.loadView(res,'index', data);
                });
        }
            console.log("HIIIIELO");

        })
        .catch(function (error) {
            console.log(error);
            data.error=true;
            system.loadView(res,'index', data);
        });


    // load index view from views, with passed data
}
};

// add controller functions to exports
module.exports = indexController;

Answer 1

如果您不能像那样访问数组，请尝试为 Handlebars 制作助手。

var exphbs  = require('express-handlebars');  
var hb = require('handlebars');

app.engine('handlebars', exphbs({
        layoutsDir: 'yourDir',
        defaultLayout: 'main',
        partialsDir: ['/views/partials/'],
        helpers: {
          formatText: function(data) {
            var sendData = '';
            //your function for formating data
            //fill 'sendData' with html how u wanna type it in HTML
            return new hb.SafeString(sendData);
          }
        }
      }));
app.set('views', config.root + '/app/views');
app.set('view engine', 'handlebars');

然后在你的 file.hbs 中输入..

{{ formatText projects }}

这个项目是参数，你正在向那个函数发送整个数据。