Scenario-specific blueprints

I'm currently facing a challenge in incorporating logic into a dustjs template, and I find it challenging to integrate all the components seamlessly.

Here is an example of the JSON data I have:

{
    "names": [{
        "name": "User 1",
        "isSir": true
    }, {
        "name": "User 2",
        "isSir": true
    }, {
        "name": "User 3",
        "isSir": true
    }, {
        "name": "User 4",
        "isSir": false
    }, {
        "name": "User 5",
        "isSir": false
    }, {
        "name": "User 6",
        "isSir": false
    }]
}

I aim to iterate through this data and only display the first item for each variation of "isSir". The remaining items will be hidden using CSS, resulting in an output like this:

  • User 1 (displayed)
  • User 2 (hidden)
  • User 3 (hidden)
  • User 4 (displayed)
  • User 5 (hidden)
  • User 6 (hidden)

I've attempted using different variations of {@if cond to filter out only those marked as "Sir" initially, followed by the others. However, because I also need to maintain count within the loop, I started exploring the possibility of utilizing {@select key=.

Since I am relatively new to Dust, I believe there might be a crucial aspect that I am overlooking.

If someone could provide assistance with this issue, it would be greatly appreciated.

javascriptjsondust.js

Answer №1

In order to simplify the templating process, Dust is designed as a logicless or less-logic language. This means that while your application can still incorporate logic, the display logic should be included in your JSON data.

If you are facing an issue with Dust due to your current JSON structure, consider updating it to something like:

{
    "names": [{
        "name": "User 1",
        "isSir": true,
        "isHidden": false
    }, {
        "name": "User 2",
        "isSir": true,
        "isHidden": true
    }, {
        "name": "User 3",
        "isSir": true,
        "isHidden": true
    }, {
        "name": "User 4",
        "isSir": false,
        "isHidden": false
    }, {
        "name": "User 5",
        "isSir": false,
        "isHidden": true
    }, {
        "name": "User 6",
        "isSir": false,
        "isHidden": true
    }]
}

Once you have updated your JSON, you can use a template similar to this:

<ul>
{#names}
  <li{?isHidden} class="hidden"{/isHidden}>
    {?isSir}Sir {/isSir}{name}
  </li>
{/names}
</ul>

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

What is the best way to create a more compact Select component in React?

Working on React's Select component has been quite the challenge for me. I'm in the process of creating a simple dropdown button, also known as a ComboBox, similar to what can be seen on GitHub Insights: https://i.stack.imgur.com/J9Bcd.png Belo ...

javascriptcssreactjsmaterial-uiinline-styles

When the page is dynamically loaded, Ng-repeat does not function as expected

I am working on a page that includes the following code snippet: <script> angular.module('myapp', []).controller('categoryCtrl', function($scope) { $scope.category = <? echo json_encode($myarr); ?>; $scope.subcatego ...

javascriptangularjsangularjs-ng-repeat

Sparks: Unlocking the Power of Transformative Merging

I am faced with a task involving 1000 JSON files that require individual transformations followed by merging into a single output file. The merged output must ensure no duplicate values are present after overlapping operations have been performed. My appr ...

javajsonapache-sparkrdd

Retrieving JSON data and showcasing it in HTML components

I'm attempting to retrieve JSON responses and showcase them within my predetermined HTML elements. I'm utilizing graphql from datocms. The API explorer displays the following for my model: query MyQuery { allNews { id newsTitle new ...

javascriptjsongraphql

Angular's UI Modal: utilizing inline template and controller functionality

I am looking to create a simple confirmation box using UI-modal, which I have used successfully for more complex modals in the past that load their template and controller from external files. However, this time I want something even simpler - just a basi ...

javascriptangularjsangular-ui

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the

Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...

javascripthtmlcss

What is the reason for index.html requesting the css or js modules as if they were directories when loading?

I am currently developing a server using expressjs: 'use strict'; var express = require('express'); var logger = require('morgan'); var path = require('path'); var bodyParser = require('body-parser'); va ...

javascripthtmlcssexpress

Identifying Changes in Form Values Using jQuery

I am facing a challenge with a dynamic form that needs to detect the field sequence properly. Below is my JavaScript file: var i = 1; $("a.add-line").click(function(){ $("div.items").append( $('<div>').attr('id',&ap ...

javascriptjquery

Tips for efficiently sending multiple ajax requests

Seeking help with my ajax knowledge. Currently, I have a function that is supposed to insert multiple items into an SQL database using a PHP page. However, it seems to only be inserting the last item entered. Here's the code snippet: function submitI ...

phpjavascriptajax

Avoiding repetition in json array using reactjs with the help of axios

After receiving guidance from @Akrion, I managed to resolve the issue! Check out my comments below our conversation for the solution. I am relatively new to reactJS and axios, but I recently collaborated with a classmate on a project. Now, I find myself s ...

javascriptarraysjsonreactjsaxios

Certain conditions in JavaScript are not executed by Internet Explorer

I am currently working on a Html file that involves XSLT. I have integrated some JavaScript code for filtering specific rows within tables. However, I have encountered an issue where certain if-cases in my JavaScript are not executing as expected when usin ...

javascriptinternet-explorer-11

Exploring the limitations of middlewares in supporting independent routers

When I examine the code provided, it consists of three distinct routers: const Express = require("express") const app = Express() // Three independent routers defined below const usersRouter = Express.Router() const productsRouter = Express.Router() cons ...

javascriptnode.jsexpressservermiddleware

Retrieve webpage using HTML stored in web storage

I am exploring a new idea for an application that utilizes local storage, and I am seeking guidance on the most effective way to load content after it has been stored. The basic concept of the app involves pre-fetching content, storing it locally, and the ...

javascriptjqueryajaxhtmllocal-storage

ES6 Generators: lack of informative stack trace when using iterator.throw(err)

The ES6 approach: iterator.throw(err) is often explained as inserting an exception as if it happened at the yield statement within the generator. The challenge lies in the fact that the stack trace of this exception does not include any information about t ...

javascriptajaxecmascript-6generatoryield

GraphQL Shield throws an 'Unauthorized' error for a permitted mutation

I've been working on setting up a GraphQL API with apollo-server-express, and I'm trying to handle permissions using graphql-shield middleware. However, I'm running into some issues when it comes to allowing mutations to be executed. My aim ...

javascriptnode.jsexpressgraphqlapollo-server

Publishing Your App on the Android Market with PhoneGap

Seeking a comprehensive PhoneGap tutorial that covers app publishing, especially struggling with successful app deployment. Currently experienced in HTML, CSS, and JavaScript. Any tips or advice would be greatly appreciated, thank you! I have a good gras ...

javascripthtmlcssphonegap-buildphonegap-developer-app

Using PHP's mysqli function to generate a JSON array

Currently, I am in the process of learning php/mysql to enhance a website that I am constructing. Initially, everything was functioning as intended but there were numerous vulnerabilities and security flaws with minimal error handling mechanisms. To addres ...

phpjsonmysqli

What is the best way to parse a JSON file in GWT without knowing the structure

I am developing a GWT project and facing the challenge of loading and parsing JSON files with unknown schema. It seems that using overlay types may not be the best approach as I cannot predict the format of the file beforehand. Despite researching online ...

jsongwt

Steps for installing a package using npm without the need for configuring a package.json file

According to this source, it is feasible to install npm packages before creating the package.json file. After installing nodeJS on my computer, I attempted to run the following command in an empty directory: npm install jQuery This resulted in the follow ...

javascriptnpmnpm-install

HTML Buttons Remain Selected After Being Clicked

Currently working on a calculator app for a class project but I've hit a roadblock while setting up keyboard listeners. The keyboard functionality is fine, however, when it comes to clicking on buttons, specifically the non-keyboard functions, they re ...

javascripthtmlcsstwitter-bootstrap-3