javascript - Handlebars output null for missing fields - Stack Overflow

admin管理员组

文章数量:1287637

I am trying to use handlebars to format data received from a JSON file. My current structure is something similar to this:

        <table class="table table-striped">
            <thead>
            <tr>
                <th>Name</th>
                <th>Mark</th>
                <th>Subject</th>
                <th>School</th>
                <th>Birthday</th>
            </tr>
            </thead>
            <tbody>
            {{#each students}}
            <tr>
                <td>{{ this.name }}</td>
                <td>{{ this.mark }}</td>
                <td>{{ this.subject }}</td>
                <td>{{ this.school }}</td>
                <td>{{ this.birthday }}</td>
           </tr>
            {{/each}}
            </tbody>
        </table>

The JSON file I have does not have consistent structure, some student element only contains name (missing all other fields), and some only contain name and school.

If I am using my current code to template the JSON file, I will be getting a table with a lot of blank cells which I would like to write in "null" instead.

I was thinking maybe I should write a registerhelper but if so, how exactly should I do it?

I am trying to use handlebars to format data received from a JSON file. My current structure is something similar to this:

        <table class="table table-striped">
            <thead>
            <tr>
                <th>Name</th>
                <th>Mark</th>
                <th>Subject</th>
                <th>School</th>
                <th>Birthday</th>
            </tr>
            </thead>
            <tbody>
            {{#each students}}
            <tr>
                <td>{{ this.name }}</td>
                <td>{{ this.mark }}</td>
                <td>{{ this.subject }}</td>
                <td>{{ this.school }}</td>
                <td>{{ this.birthday }}</td>
           </tr>
            {{/each}}
            </tbody>
        </table>

The JSON file I have does not have consistent structure, some student element only contains name (missing all other fields), and some only contain name and school.

If I am using my current code to template the JSON file, I will be getting a table with a lot of blank cells which I would like to write in "null" instead.

I was thinking maybe I should write a registerhelper but if so, how exactly should I do it?

• javascript
• json
• html-table
• handlebars.js
• missing-data

Share Improve this question Follow edited Jul 26, 2017 at 22:25 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jul 17, 2014 at 19:35 user3669481user3669481 32777 silver badges1919 bronze badges 1

• It's also possible without any specific helper; see my updated answer. – Arjan Commented Sep 24, 2014 at 19:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Recent versions of Handlebars.js support the following to report all missing helpers and values in things like {{myName}}, {{something.myName}} or {{myHelper someValue}}, without the need for a dummy helper within the curly braces:

Handlebars.registerHelper('helperMissing', function(/* [args, ] options */) {
    var options = arguments[arguments.length - 1];
    return 'MISSING VALUE: ' + options.name;
});    

(Tested with 2.0.0)

And though the question is for JavaScript, for posterity here's a solution for Handlebars.java:

final Handlebars handlebars = new Handlebars();

/*
 * By default, Handlebars outputs an empty String for missing values,
 * and throws an exception if a helper is missing. Here, make it never
 * throw an exception, and show a warning in the result text.
 */
handlebars.registerHelperMissing(new Helper<Object>() {
    @Override
    public CharSequence apply(final Object context, final Options options) 
          throws IOException {
       return "MISSING VALUE: " + options.helperName;
    }
});

(Tested with the most recent version, being 1.3.2)

And the same for Mustache.java:

final DefaultMustacheFactory mf = new DefaultMustacheFactory();

mf.setObjectHandler(new ReflectionObjectHandler() {
    @Override
    public Wrapper find(final String name, final Object[] scopes) {
        Wrapper wrapper = super.find(name, scopes);
        if (wrapper instanceof MissingWrapper) {
            return new Wrapper() {
                @Override
                public Object call(Object[] scopes) throws GuardException {
                    return "MISSING VALUE: " + name;
                }
            };
        }
        return wrapper;
    }
});

(Tested with version 0.8.2, which is a bit outdated. Not tested with conditionals and loops.)

You could define a handlebars helper as follows:

Handlebars.registerHelper("getStudentValue", function(val) {
    if(val === undefined) {
        return "null";
    }
    return val;
});

And the corresponding markup would look like:

 {{#each students}}
        <tr>
            <td>{{getStudentValue this.name }}</td>
            <td>{{getStudentValue this.mark }}</td>
            <td>{{getStudentValue this.subject }}</td>
            <td>{{getStudentValue this.school }}</td>
            <td>{{getStudentValue this.birthday }}</td>
       </tr>
  {{/each}}

本文标签： javascriptHandlebars output null for missing fieldsStack Overflow