Display the key value pairs of a nested object

help
1

I have inserted this data in mini mongo

db.orders.insert( { _id: ObjectId().str, name: "admin", status: "online",catalog : [
        {
            "objectid" : ObjectId().str,
            "message" : "sold",
            "status" : "open"
        }
    ]})

This is the nested object i am more interested in

    {
                "objectid" : ObjectId().str,
                "message" : "sold",
                "status" : "open"
            }

I am able to display data from mongo since i know fields by name and even nested fields.
This is the template i am using to display the data

<template name="Listed">
  <div class="row">

    {{#each list}}
      <article class="post">
      <a href="{{pathFor route='edit'}}"><h3>{{_id}}</h3></a>
      <a href="{{pathFor route='edit'}}"><h3>{{name}}</h3></a>
      <br>
      <a href="{{pathFor route='create'}}"><h3>{{status}}</h3></a>
      <br>
      {{#each catalog  }}
      <a href="{{pathFor route='create'}}"><h3></h3></a>
       <a href="{{pathFor route='create'}}"><h3>{{objectid}}</h3></a>
       <a href="{{pathFor route='create'}}"><h3>{{status}}</h3></a>
       {{/each}}
     <div class="well"></div>
     <br/>
    
    </article>
   <br/><br/>
   {{/each}}
   </div>
</template>

In the real app i am making,i do not know the fields of the catalog object. How can i iterate and display the key/value pairs for the fields in the catalog object?.

2

Solved it this way

<template name="Listed">
  <div class="row">

    {{#each list}}
      <article class="post">
      <a href="{{pathFor route='edit'}}"><h3>{{_id}}</h3></a>
      <a href="{{pathFor route='edit'}}"><h3>{{name}}</h3></a>
      <br>
      <a href="{{pathFor route='create'}}"><h3>{{status}}</h3></a>
      <br>
      {{#each item in catalog}}
  {{#each keyval item}}
    <a href="{{pathFor route='create'}}"><h3>{{key}}:: {{value}}</h3></a>
    <a href="{{pathFor route='create'}}"><h3></h3></a>
  {{/each}}
{{/each}}
     <div class="well"></div>
     <br/>
    
    </article>
   <br/><br/>
   {{/each}}
   </div>
</template>

helper

Template.registerHelper("keyval",function(object){
  return _.map(object, function(value, key) {
    return {
      key: key,
      value: value
    };
  });
});
3

You could also use _.pairs within your helper - quick example:

Template.body.helpers({

  catalog() {
    const fakeCatalog = {
      firstItem: 'blah 1',
      secondItem: 'blah 2',
      thirdItem: 'blah 3'
    };
    return _.pairs(fakeCatalog);
  }

});

  ...
  {{#each catalog}}
    <p>key: {{this.[0]}}, value: {{this.[1]}}</p>
  {{/each}}
  ...