Comet: showcase nested object on the client side using handlebars

Received JSON from helper :

 {
  "perms": [
     {
         "userId": "rA5s5jSz7q9ZSCcNJ",
         "perms": [
             {
                 "moduleName": "Gallery",
                 "container": {
                     "ImageUpload": {
                         "addImage": false,
                         "modifyImage": false,
                         "removeImage": false
                     },
                     "Article": {
                         "readArticle": false,
                         "createArticle": false,
                         "modifyArticle": false,
                         "removeArticle": false,
                         "archiveArticle": false
                     }
                 }
             }
         ]
     },
     {
         "userId": "RrmynmmngJEMsRRpk",
         "perms": [
             {
                 "moduleName": "Gallery",
                 "container": {
                     "ImageUpload": {
                         "addImage": false,
                         "modifyImage": false,
                         "removeImage": false
                     },
                     "Article": {
                         "readArticle": false,
                         "createArticle": false,
                         "modifyArticle": false,
                         "removeArticle": false,
                         "archiveArticle": false
                     }
                 }
             }
         ]
     }
 ]

Included JS code :

    'userWithRights':function() {
        Meteor.call('genereObjectPermission',function(err, resp){
           Session.set('responseServer', resp);
           });
        responseServer = Session.get('responseServer')
        return _.map(responseServer, function(value, key) { return {key: key, value: value}; })

    },'iterateInValue':function(){
        return _.map(this, function(value, key) { return {key: key, value: value}; })

}

Here is the HTML representation of the data after multiple attempts:

{{#each userWithRights}}
  <p> {{key}} </p>
  {{#each value}}
    <li>{{this.userId}}</li>
    {{#each perms}}
      <li><li>{{moduleName}}</li></li>
      {{#each test58}}
          <li><li><li>{{key}}</li></li></li
      {{/each }}
    {{/each}}
  {{/each}}
{{/each}}

However, facing challenges when trying to iterate through nested objects using Handlebars:

{"container": { "ImageUpload": { "removeImage": false }}}

The desired output structure would be as follows:

  • rA5s5jSz7q9ZSCcNJ
  • Gallery

  • ImageUpload

    • addImage : true
    • modifyImage : false
    • removeImage : false
  • Article
    • readArticle: true
    • createArticle: false
    • modifyArticle: false

Answer №1

If you're looking to utilize a #with helper and access keys with the @key attribute, here's how you can do it:

{{#each userWithRights}}
  <p> {{key}} </p>
  <ul>
  {{#each value}}
    <li>{{this.userId}}</li>
    {{#each perms}}
      <li>{{moduleName}}</li>
      {{#with container}}
        {{#with ImageUpload}}
          <li>{{@key}}</li>
        {{/with}}
        <ul>
        {{#each ImageUpload}}
          <li>{{@key}}: {{this}}</li>
        {{/each}}
        </ul>
        {{#with Article}}
          <li>{{@key}}</li>
        {{/with}}
        <ul>
        {{#each Article}}
          <li>{{@key}}: {{this}}</li>
        {{/each}}
        </ul>
      {{/with}}
    {{/each}}
  {{/each}}
  </ul>
{{/each}}

Hopefully this provides some clarity!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to undo the changes made by the following execution using Javascript?

Similar Question: How can I delete a cookie using JavaScript? javascript:void(document.cookie=”PREF=ID=20b6e4c2f44943bb:U=4bf292d46faad806:TM=1249677602:LM=1257919388:S=odm0Ys-53ZueXfZG;path=/; domain=.google.com”); To undo the action perfor ...

Can you explain the concept of F-Bounded Polymorphism in TypeScript?

Version 1.8 of TypeScript caught my attention because it now supports F-Bounded Polymorphism. Can you help me understand what this feature is in simple terms and how it can be beneficial? I assume that its early inclusion signifies its significance. ...

Using PHP and JavaScript to determine device screen width and eliminate the $_GET parameters from the URL

I have implemented the following JavaScript code to detect screen width and utilize it as a constant throughout my template files using conditional statements to control the visibility of different sections on my site. Just to clarify, I am working within ...

Learn how to effectively declare data as global within Angular2 or Typescript

I am facing an issue with fetching the id inside the Apiservice despite being able to get it in the console. Can anyone provide assistance on how to solve this problem? TS: deleteProduct(index,product) { var token = this.auth.getAccessTokenId(); ...

Can jQuery be used in Chrome Extensions?

I am facing an issue with my extension. Do I need to declare permissions? The "code:" line is not working in the background file. Here is the code from the Background File: chrome.browserAction.onClicked.addListener(function(tab) { // No tabs or host p ...

Problem encountered with a form element generating additional input fields upon click of a specific button

My goal is to create a button that dynamically adds email input fields to a form titled "Add Another Email". I have a function in place to trigger this action upon clicking the button, but unfortunately, nothing happens when the button is clicked. Surprisi ...

Converting a variety of form fields containing dynamic values into floating point numbers

Trying to parse the input fields with a specific class has presented a challenge. Only the value of the first field is being parsed and copied to the other fields. https://i.stack.imgur.com/QE9mP.png <?php foreach($income as $inc): ?> <input ty ...

Is there a way to programmatically click on a link within the first [td] element based on the status of the last [td] element in the same [tr] using codeceptjs/javascript?

The anticipated outcome: Pick a random assignment from the table that has the status "Not start". Below is the table provided: <table id="table1"> <tbody> <tr class="odd1"> <td> < ...

Encountering an error message: [$parse:syntax] when trying to implement ng-class

I'm currently working on developing custom form validation, utilizing ng-class to emphasize required fields. Here is the syntax I am using: <div class="form-group" ng-class="{'has-error': dc.{fname}.nedatt({{fname}}.username)}"> ...

The div element is not adjusting its size according to the content it

Essentially, I want the #main-content div to expand so that its content fits inside without overlapping, as shown in the codepen example. I've been unsuccessful in implementing the clearfix or overflow:hidden solutions so far. It's puzzling why ...

The Vue.js development server compiler is hitting a roadblock at 49% progress

My Vue JS project keeps getting stuck at 49% or sometimes 62% when I run npm run serve. No matter how long I wait, it never seems to move past that point. I have searched online many times for a solution to this issue, but it appears that no one else is e ...

Why is my JavaScript code running but disappearing right away?

I've encountered an issue with the code I wrote below. It's supposed to display the user's names when they enter their name, but for some reason, the names keep appearing and disappearing immediately. What could be causing this problem? Her ...

Generate an array containing all N-digit numbers with a sum of digits equal to S

I encountered a problem with my code translation process. Despite finding solutions in other languages, when I converted them to javascript, the expected array was not created. const find_digits = (n, sum, out, index) => { if (index > n || sum & ...

What effect does setting AutoPostBack to "true" in an ASP dropdownlist have on the fireEvent() function?

I am currently working on an aspx page. This page includes three dropdown lists and a button, all of which are populated dynamically based on the code written in the code-behind file (.cs file). To achieve this, I need to utilize two event handler methods ...

Refresh a specific portion of an HTML template following a successful AJAX request

I am facing a challenge in implementing a new feature and I'm unsure of the best approach to take. In my project, I utilize Django for backend logic and templating, as well as the Google Closure JavaScript library for frontend development. Here is th ...

Utilizing additional JavaScript libraries with custom Power BI visuals

Seeking clarification on how to use the d3 library within my visual.ts file. I have installed it using npm and added it to the externalJS section of pbiviz.json, but I am unsure of any additional configurations needed to successfully include and utilize it ...

Combine less files in webpack to generate a single minified CSS output file

Can webpack be used to combine multiple less files into one minified CSS file? I'm having trouble setting different output paths for my files. How can I make my CSS file output to './assets/stylesheets/bundle/' instead of './assets/ja ...

I'm encountering an issue in my node application where it is unable to access the push

I am a beginner in the world of node.js and express. Whenever I try to start my application using the command npm start, I encounter an error message saying Cannot Read property push of undefined from my index.js file. The problematic code snippet looks l ...

The execution of the Ajax success call is failing to take place

Looking at my recent AJAX call, I realized there might be an issue with how I'm sending the parameters. $.ajax({ type: "POST", url: "Default.aspx/GeneratePdfs", data: '{frequency: "' + $('#ddlReportFrequenc ...

Can a Javascript function be passed an endless array?

I'm curious if there's a way to generate an array that can be infinitely long. For example, if I have a function like `arr(2,3,4,5,6,7)`, is there a command that would allow me to treat those numbers as an array and automatically extend the table ...