如何将 json 嵌套数组渲染到车把视图

Question

I have a collection of docs in MongoDB as below:

    {
    "_id" : ObjectId("5a8706973e4306202c424122"),
    "title" : "how to make a robot?",
    "description" : "arif",
    "createdBy" : ObjectId("5a71a0ebc252020d4c127911"),
    "allLearningGoals" : "my third learning goals, my fourth learning goals",
    "resources_upload" : "{\"data\":[]}",
    "participants" : "[{\"email\":\"sur@gmail.com\"},{\"email\":\"arif@pbl.de\"},{\"email\":\"mac@gmail.com\"}]",
    "createdAt" : ISODate("2018-02-24T10:15:42.548Z"),
    "__v" : 0
}

I want to display my each participants in a table and also use them for sending email to all notifications. Data is coming using mongo findById and i can see it in console as:

console.log(data.project); // this is allright

So in handlebar i can see other data as:

    {{#if data.project}}
{{ data.project.title }}
{{ data.project.description}}

But for participants if i use this i see whole array as:

{{ data.project.participants}} 

it shows:

[{\"email\":\"sur@gmail.com\"},{\"email\":\"arif@pbl.de\"},{\"email\":\"mac@gmail.com\"}]

How can i display like that:

email: sur@gmail.com 

I tried this:

    {{#if data.project}}
<!-- added student list-->
<div class="form-group">
    <div class="form-row">
        <div class="col-md-12">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Email</th>
                </tr>
                </thead>
                <tbody>
                {{#each participants}}
                    <tr>
                        <td>
                            {{ this }}
                        </td>
                        <td>
                            test
                        </td>
                    </tr>
                {{/each}}
                </tbody>
            </table>
        </div>
    </div>
    <!-- added student list end -->
</div>
{{/if}}

not working...please give some nice idea. thanks

Answer 1

Try this, I guess you try to access your data the wrong way

<tbody>
    {{#each data.project.participants }}
     <tr>
         <td>
             <!-- -->
         </td>
         <td>
             {{ this }}
         </td>
     </tr>
   {{/each}}
</tbody>

Take a look at handle bars iteration section : https://handlebarsjs.com/builtin_helpers.html#iteration

Answer 2

When I retrieve this data again, I have to parse it in different participants array:

locals.data = {
        project: [],
        participants: [],
    };    
Project.model.findById(req.params.id).exec(function (err, result) {
                    locals.data.project = result;
                    console.log(result.participants);
                    var obj = JSON.parse(result.participants);
                    console.log(obj[0]);
                    locals.data.participants = obj;
                });

then in view of handlebar i can see my data as:

<table class="table table-bordered">
            <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
            </tr>
            </thead>
            <tbody>
            {{#each data.participants}}
                <tr>
                    <td>
                        {{email}}
                    </td>
                    <td>
                        test
                    </td>
                </tr>
            {{/each}}
            </tbody>
        </table>