Trouble with looping over specific elements in nested Handlebars imported arrays

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>

What I am trying to do is to specify what elements of the handlebar array

 {{projects}}

are displayed based on which button I click. For now I have only completed one button, but "{{projects.[i].[0]}}"
returns nothing. On the web page I see:

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

But If I enter a number such as 0 for "i" it works perfectly fine, but I need it to iterate over all the instances.
projects contains an array like this ---->

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

EDIT: {{projects[i][0]}} does not work ---> it simply downloads an empty TextEdit file

EDIT: I found this as well --->
<ul class="people_list"> {{#each projects}} <li>{{this}}</li> {{/each}} </ul>
but the problem is that it does not display specific elements. AKA: projects should only display the 1st and 3rd elements and I do not know how to specify with this handlebars helper.

EDIT: More strange things: if I change it to {{projects[i][0]}} in the console on the website it says Failed to load resource: Frame load interrupted even though I am not loading anything.

EDIT: When I do {{project[0][0]}} and hard code it without the for loop it gets everything our correctly, so it must be something to do with the for loop specifically rather than not being able to access the array.

EDIT: I've figured it out I made another variable outside of the for loop and called it i and I commented out the for loop and it still didn't work which means that the problem is in the array for some reason not being able to use a variable as its index. Still no fix though

EDIT: My issue may have something to do with a lack of template since I never created one and to be honest don't necessarily know how.

EDIT: My problem may be that I am attempting to iterate through it using javascript instead of HTML like the person in chiliNUT's example uses. however I do not know how to specify only 1 item with just HTML.

EDIT:

   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

If you cant access your array like that try makeing helpers for 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');

And in your file.hbs just type..

{{ formatText projects }}

This projects is parameter, you are sending whole data to that function.