Is there a way to display this JSON data using mustache.js without needing to iterate through a

Here is the JSON data:


        var details = [
            {
                "event": {
                    "name": "txt1",
                    "date": "2011-01-02",
                    "location": "Guangzhou Tianhe Mall"
                }
            },
            {
                "event": {
                    "name": "txt2",
                    "date": "2011-01-02",
                    "location": "Guangzhou Tianhe Mall"
                }
            },
            {
                "event": {
                    "name": "txt3",
                    "date": "2011-01-02",
                    "location": "Guangzhou Tianhe Mall"
                }
            }
        ];
    

And this is my mustache template:


        {{#event}}
            <div>
                <h2>{{name}}</h2>
                <span>on {{date}}</span>
                <p>{{location}}</p>
            </div>
        {{/event}
    

The current template code above does not work. I am now trying to figure out a way to make it work without using a loop:


        var output = Mustache.render(template, details);
    

Is there a more efficient method to achieve this without the need for a loop?

Answer №1

Here is a different approach using mustache templates to achieve the same outcome. Start by organizing your data like this:

 var info = {info: [
    {
        "event": {
            "name": "txt1",
            "date": "2011-01-02",
            "location": "Guangzhou Tianhe Mall"
        }
    },
    {
        "event": {
            "name": "txt2",
            "date": "2011-01-02",
            "location": "Guangzhou Tianhe Mall"
        }
    },
    {
        "event": {
            "name": "txt3",
            "date": "2011-01-02",
            "location": "Guangzhou Tianhe Mall"
        }
    }
]};

Next, structure your template code like this:

{{info}}
{{#event}}
<div>
<h2>{{name}}</h2>
<span>on {{date}}</span>
<p>{{location}}</p>
</div>
{{/event}
{{/info}}

I hope this provides a helpful alternative solution.

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

Generate the entity and then transfer the data into an array

I am dealing with multi-level hierarchies that need to be displayed in a select list. Once the user selects values from the table column, they should be able to filter by clicking on the column. var name = ['Akansha', 'Navya']; var age ...

What causes insertMany in mongoose to not generate ObjectIds?

Currently, I am in the process of developing an application using Node.JS and MongoDB. My challenge lies in inserting multiple documents with predefined _ids and some ObjectId arrays. When I utilize insertMany function, all document _id fields turn into st ...

Incorporating a JavaScript file into Angular

I'm looking to incorporate a new feature from this library on GitHub into my Angular project, which will enhance my ChartJS graph. @ViewChild('myChart') myChart: ElementRef; myChartBis: Chart; .... .... const ctx = this.myChart.nativeEleme ...

Determine the specified keys within a JSON object using Python

My goal is to generate JSON output that includes a list of MAC addresses and corresponding timestamps for each address. Here's an example of the desired output: [ "B2:C7:23:10:A0": [ "2014-04-04T21:30:46.348900800Z", "2014-04-04T21:30:46.348 ...

Setting a specific time for a div element with opacity: A step-by-step guide

Is there a way to adjust the timing for the appearance of the add-to-cart when hovering over the product-list-item? Currently, it appears when I hover over the item and disappears when I move my mouse away. .product-list-item { position: relative; w ...

The WebDriverIO browser.Click function encountered difficulty locating an element while using Chrome, but it is functioning properly on Firefox

Currently, I am utilizing WebdriverIO in combination with CucumberJS for testing purposes. The following code functions correctly in Firefox; however, I encounter errors in Chrome which display element is not clickable. I am seeking a solution using JavaSc ...

What are the consequences of submitting a form to a different website through POST method?

Dealing with a CMS that does not offer an easy way to add a NodeJS route for handling form data can be quite challenging. I'm considering the following setup - would this be considered bad practice or unsafe? Server 1 (Ghost CMS) : www.domain.com &l ...

Display the number of items that have been filtered as soon as the Mixitup page loads

Currently, I am utilizing MixItUp 3 for sorting and filtering items, with the goal of displaying the count of items within each filter category upon the initial page load. Despite attempting a solution found on SO (mixitup counting visible items on initial ...

Access external variables in next.js outside of its environment configuration

Currently, I am developing my application using next js as the framework. While my environment variables work smoothly within the context of next js, I am facing a challenge when it comes to utilizing them outside of this scope. An option is to use dotenv ...

Need help inserting an image into the div when the ngif condition is true, and when the ngif condition is false

Essentially, I have a situation where I am using an *ngIf condition on a div that also contains an image. This is for a login page where I need to display different versions based on the type of user. However, I'm facing an issue where the image does ...

Tips on effectively utilizing RABL partial templates while maintaining consistency

Currently working with Ruby on Rails 4 and incorporating the RABL gem into my project. I am seeking a way to reuse templates by rendering the show.json.rabl view from the index.json.rabl while following the standards outlined at jsonapi.org (source: RABL d ...

Updating parent scope data from within a directive without relying on isolated scope bindings

What is the best method for passing data back to the parent scope in AngularJS without using isolated scopes? Imagine I have a directive called x, and I want to access its value named a. The desired syntax would be: <x a="some.obj.myA"></x> c ...

Exploring the movement from one component to another in React Native

When working with React Native, I encountered a challenge in navigating between two views. The issue arises from having the button to navigate on one component while my main component is elsewhere. I am using react-navigation for this purpose. Here's ...

How to properly utilize $.ajaxComplete and $.ajaxError functions?

I have been utilizing the code snippet below for my ajax form submissions: $.ajax({ url: "", data: ilmoittautumisdata, type: "POST", success:function(){ }); error:function(){ }); }); However, I recall being advised to discontinue using success and erro ...

Notification issues in Vue with Firebase Cloud Messaging while in foreground

I have been working on implementing FCM in my Vue PWA application. I have successfully configured background notifications, but I am facing issues with handling notifications when the app is open. Here is the code I am using. src/App.vue import firebase ...

Troubleshoot my code for clustering markers on a Google map

I'm currently working on a piece of code to generate a Google map that contains 3 hidden points within one marker. The idea is that when the main marker is clicked, these points will either merge into one or expand into 3 separate markers. However, I& ...

Unravel the layers of a complex database with json_normalize

Trying to convert a json database into a pandas dataframe and facing difficulties as it's my first time working with json format. The database can be accessed here: . The structure of the database is presented as follows: { "0120a941-9cfb-50b5- ...

Utilizing jQuery to fetch the source value of an image when the closest radio button is selected

On my website, I have a collection of divs that display color swatches in thumbnail size images. What I want to achieve is updating the main product image when a user clicks on a radio button by fetching the source value of the image inside the label eleme ...

Adding a command to open a new browser tab using JavaScript code can easily be accomplished by following these steps. By using Terminal, you can quickly and efficiently implement this feature

I'm new to coding and trying to create a terminal simulation. You can check out my code here: https://codepen.io/isdampe/pen/YpgOYr. Command: var coreCmds = { "clear": clear }; Answer (to clear the screen): function clear(argv, argc ...

Freeze your browser with an Ajax request to a specific URL

There is a function in my view that transfers a value from a text box to a table on the page. This function updates the URL and calls another function called update_verified_phone(). The update_verified_phone() function uses a model called user_info_model( ...