how to use app.locals. parameter inside javascript?

Question

I am developing a node.js application. I loaded a JSON file as app.locals.parameter in app.js. then I am trying to use it in my index.hbs.

Assume:

app.locals.componentData = require('./myfile.json');

when I used the parameter inside my HTML part as below it is functioning properly.

 {{#each componentData.categories}}
        <li id="{{this.categoryName}}" name="{{this.categoryName}}" class="btn btn-primary btn-sm" style="position: relative; z-index: 10; margin-bottom:3px" draggable="true" role="option" aria-grabbed="false"><div><img src="images/plugin.png" alt="{{this.categoryDescription}}"/>{{this.categoryName}}</div></li>
 {{/each}}

but when I am trying to use the parameter in my javascript function it cannot recognize it.

function InitComponents() {
         for( var i = 0; i < componentData.categories.length; i++ ){
             alert("in loop!"+i+"-"+componentData.categories[i].categoryName);
              if(componentData.categories[i].categoryName.match(itemId)){
              alert("here:"+componentData.categories[i].parameters.length);
          createParameterList(newID,componentData.categories[i].parameters);
                        }

            }

    }

my JSON format is as below:

{
    "categoryName": "xyz",
    "categories": [
      {
        "categoryName": "ABC", 
        "parameters": [
          {
            "ParameterID": "ID",
            "ParameterName": "ID",
            "ParameterDefultValue": "",
            "ParameterValue": "",
            "ParameterDescription": "ID Description"
          }]
}]
}

may I know why system cannot understand componentData.categories.length in my script part?

Volodymyr · Accepted Answer · 2018-10-15 19:38:36Z

1

The problem here is that InitComponents function doesn't know anything about app.locals. app.locals variable is recognized inside templates. In order to make your code work you need to pass app.locals.componentData as a parameter to InitComponents function:

function InitComponents(componentData) {
     for( var i = 0; i < componentData.categories.length; i++ ){
         alert("in loop!"+i+"-"+componentData.categories[i].categoryName);
          if(componentData.categories[i].categoryName.match(itemId)){
            alert("here:"+componentData.categories[i].parameters.length);
            createParameterList(newID,componentData.categories[i].parameters);
          }
     }
}

Now you can call this function like this

InitComponents(app.locals.componentData);

and InitComponents will now actually know what componentData is. If you use this function inside a middleware you can access app via req.app:

myMiddlewareFunction((req, res, next) => {
    const app = req.app;
    initComponents(app.locals.componentData);
    // some other logic
})

answered Oct 15, 2018 at 19:38

Volodymyr

1,4081 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Amir Over a year ago

@volodymry: Thanks for your answer. I added changes as you said, but now in my button which called Initial component I received this error: "Uncaught ReferenceError: app is not defined." Also, can you explain the last part of your answer, I didnt get it. where I should add it?

Volodymyr Over a year ago

@Amir can you please share the code of the function inside which you call InitComponents function?

Amir Over a year ago

@Volodymry: I call it like this: <button onclick="InitComponents()">Initialize Components</button> [previously] and now => <button onclick="InitComponents(app.locals.componentData)">Initialize Components</button>

Volodymyr Over a year ago

I think, I misunderstood your question. I thought you are trying to use componentData inside JS on NodeJS side. But as far as I got it now you are trying to use componentData inside a frontend script. If so you need to fetch this JSON file from your server and to assign it to a variable inside your script. Or you can insert a <script> tag inside a template with javascript that will assign componentData to a global variable.

Amir Over a year ago

can you modify your answer based on your new understanding. because I am new to NodeJS. As I mentioned above I loaded the JSON in app.locals.componentData in app.js; I can use componentData successfully in my HTML part but in script part I dont know how to use it. :(

|

Collectives™ on Stack Overflow

how to use app.locals. parameter inside javascript?

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related