循环遍历嵌套 Handlebars 导入数组中的特定元素的问题

Posted 2023-03-07

【中文标题】循环遍历嵌套 Handlebars 导入数组中的特定元素的问题

【英文标题】：Trouble with looping over specific elements in nested Handlebars imported arrays

【发布时间】：2016-11-26 18:34:08

【问题描述】：

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

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

 projects

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

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

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

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> 但问题是它不显示特定元素。又名：项目应该只显示第一个和第三个元素，我不知道如何使用这个把手助手指定。

编辑：更奇怪的事情：如果我在网站的控制台中将其更改为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;

【问题讨论】：

去掉夹在中间的点：数组括号应该邻接。

我试过了，但是没有数组括号它什么都不会显示，我知道数组括号可以工作，因为如果我把 0 放在那里，它会返回正确的值。

这应该可以工作projects[i][0]

这很奇怪：当我将其更改为projects[i][0] 时，当我刷新网页时，它下载了一个空的 TextEdit 文件。并没有显示任何内容

projects.[i].0? ***.com/questions/8044219/…

【参考方案1】：

如果您无法像那样访问您的阵列，请尝试为车把制作助手。

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 

此项目是参数，您将整个数据发送到该函数。

【讨论】：

我应该在同一个 html 文件中制作还是单独制作一个？

你在这个项目中使用 node 和 express 吗？？

是的，我两者都用：我有一个 node.js javascript 文件，我实际上在其中获取了这个 html 文件的信息。

好的，把它添加到你的node.js文件中..用这个代码替换你的引擎..在你的索引文件中调用那个函数并将你的数据发送给它

我按照你说的做了，但是当我运行它时，我收到了这个错误消息 ReferenceError: config is not defined