Search code examples
jsonnode.jshandlebars.js

(Handlebars/JSON) nested each to read array


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);

Solution

  • Two place you need to change

    1. Your family collection needs to be an array instead of an object
    2. 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}}