(Handlebars/JSON) nested each to read array

Question

I've a family-table, with property member as array.

The first #each works fine, but I can't make the second/nested #each work to read data from the array within family-table (see JSON part).

I tried these 2 ways without success:

  {{#each family}}                   |      {{#each family as |x|}}
    <h1>{{surName}}</h1>             |         <h1>{{x.surName}}</h1>
                                     |
    {{#each member}}                 |         {{#each x.member as |y|}}
       <h1>{{firstName}}</h1>        |            <h1>{{y.firstName}}</h1>
    {{else}}                         |         {{else}}
       <h1>Not working</h1>          |            <h1>Not working</h1>
    {{/each}}                        |         {{/each}} 
                                     |
  {{else}}                           |       {{else}}
      <h1>No family</h1>             |           <h1>No family</h1>
  {{/each}}                          |       {{/each}}

JSON:

//family collection
{
    "_id": {
        "$oid": "5a6a906492b7b30014b18111"
    },
    "date": {
        "$date": "2018-01-26T02:20:20.428Z"
    },
    "surName": "x",
    "members": [
        {
            "firstName": "x"
        },
        {
            "firstName": "y"
        },
        {
            "firstName": "z"
        }
    ]
}

Route:

const express = require("express");
const mongoose = require("mongoose");
const router = express.Router();

    require("../models/Family");
    const Family = mongoose.model("family");

    router.get('/', (req, res) => {
        Family.find({}) 
        .sort({ date: 'desc' })
        .then(family => {
          res.render('family/index', {
            family: family
          });
        });
    });    
module.exports = router;

EDIT:

My Family.js Model

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

//Create Schema
const FamilySchema = new Schema({
  surName: {
    type: String,
    required: true
  },
  firstName: {
    type: String,
    required: true
  },
  date: {
    type: Date,
    default: Date.now
  }
});

mongoose.model('family', FamilySchema);

yue you · Accepted Answer · 2018-02-05 00:46:50Z

2

Two place you need to change

Your family collection needs to be an array instead of an object
The data filed is members instead of member

The following code works

app.js

var express = require('express');
var exphbs  = require('express-handlebars');
var app = express();

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

app.get('/', function (req, res) {
    const family = [{
      "_id": {
          "$oid": "5a6a906492b7b30014b18111"
      },
      "date": {
          "$date": "2018-01-26T02:20:20.428Z"
      },
      "surName": "x",
      "members": [
          {
              "firstName": "x"
          },
          {
              "firstName": "y"
          },
          {
              "firstName": "z"
          }
      ]
  }]

    res.render('home', {
      family
    });
});

app.listen(3000);

home.handlebars

{{#each family as |family|}}                  
    <h1>{{family.surName}}</h1>           

    {{#each family.members as |member|}}                
       <h1>{{member.firstName}}</h1>       
    {{else}}                        
       <h1>Not working</h1>         
    {{/each}}                        

  {{else}}                          
      <h1>No family</h1>             
{{/each}}

edited Feb 5, 2018 at 0:46

answered Feb 5, 2018 at 0:23

yue you

2,2641 gold badge14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

ipid Over a year ago

"Your family collection need to be an array instead of an object" - how do I do that exactly? I'm using mongoDB which I uploaded to mLab.

yue you Over a year ago

You can try the toArray API in your Document Find Promise chain

collection.find({}).toArray(function(err, docs) {     assert.equal(err, null);     console.log("Found the following records");     console.log(docs)     callback(docs);   });

ipid Over a year ago

I get TypeError: Family.find(...).toArray is not a function. Any idea how to solve that?

ipid Over a year ago

I added the whole code from route part in my question.

yue you Over a year ago

If there is no members, the handlebars part will not render it. But you should separate the concerns first. I think using a mocked JSON to make this rendering part work is fair enough for your question. And I think my code works for your use-case. Hope it helps you. If that's fine please accept my answer thanks

|

Collectives™ on Stack Overflow

(Handlebars/JSON) nested each to read array

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related