Display json object dynamically

Question

I have a json object in collection which I need to show it on the page. Here is what I did: I first call the helpers template then in that I fetch the json object from the collection: I am using coffeescirpt and jade-handlebars, here goes my code in coffeescript:

Template.test.helpers
  test: ->
    test = Question.find().fetch(); 
    test

In the console when I do Question.find().fetch() the following thing occurs:

QuestionData: Object
question1: "How many kids do I have ?"
question2: "when will i die ?"
question3: "how many wife do i have ?"
question4: "test"
__proto__: Object
_id: "w9mGrv7LYNJpQyCgL"
userid: "ntBgqed5MWDQWY4xt"
specialNote: "Rohan ale"

Now in the jade when I call the template by:

template(name="hello")
  .test {{QuestionData}}

I can see only the [object] [object]. To see the question1,question2 I have to do the following:

template(name="hello")
  .test {{QuestionData.question1}}, {{QuestionData.question2}}

How can I dynamically show all the questions without doing {{QuestionData.question1}} ...

Thank You in advance !!!

Jim Mack · Accepted Answer · 2013-09-10 10:38:58Z

You can dynamically compose field names in a loop.

b = { q1: 'a1', q2: 'a2', q3: 'a3' };
for (x=1;x<=3;x++) { console.log( b[ 'q' + x ] ) }

That being said, there's a lot here that seems a misunderstanding to me. I'd step back and say that you should look into storing one question per mongo document. This gives you the easiest data for meteor to play with. Or, storing multiple questions in an array:

test = {
  questions : [ 
    "How many kids do I have ?"
    "when will i die ?"
    "how many wife do i have ?"
    "test" ] ,
userid: "ntBgqed5MWDQWY4xt",
specialNote: "Rohan ale"
}

The problems come when you think how you store the answers, sort the questions, etc. Probably a collection called questions, with a field maybe called sortOrder, a field called tag, etc.

How did you pick up calling templates this way, rather than having them as html files that a router manages for you?

RonH · Accepted Answer · 2013-09-10 11:31:32Z

2

instead of just returning your json object with Questions.find().fetch() you could add another step to put your data into an array like:

test = function() { 
  var temp = [];
  for (item in Questions.find().fetch()) {
    temp.push(item);
  };
  return temp;
};

return test;

(sorry for not writing in coffee script, i'm not aware of the language abstraction)

answered Sep 10, 2013 at 11:31

RonH

1402 silver badges14 bronze badges

2 Comments

Bhim Prasad Ale Over a year ago

then how do we call it from the tempalte @RonH

Bhim Prasad Ale Over a year ago

in the console i still get Object {_id: "w9mGrv7LYNJpQyCgL", userid: "ntBgqed5MWDQWY4xt", QuestionData: Object, imgurl: "filepicker.io/api/file/e4jZ. I am still getting the "Object" when using QuestionData

Dave · Accepted Answer · 2013-09-24 15:24:55Z

2

To answer your question on how to do it, you can do something like this(in JS, sorry, not a coffeeScripter):

Template.Questionnaire.questions = function () {
    var questions = [];
    _.each(Object.keys(this), function (field) {
        if(/^question.+/.test(field)) {
            questions.push({ label: field, question: this[field]});
        }            
    });
    return questions;
};

And then in a template:

<template name="Questionnaire">
{{#each questions}}
    <label>{{label}}</label>
    <span>{{question}}</span>
{{/each}}
</template>

Something like that. But I agree with Jim Mack and that you should probably be storing this in an array.

answered Sep 24, 2013 at 15:24

Dave

2,5762 gold badges21 silver badges27 bronze badges

1 Comment

Bhim Prasad Ale Over a year ago

ya i have gone with Jim Mack and figure it out myself. Thanks for all who have answer the question. you guys truly deserve the best. :) : )

Nishan Hitang · Accepted Answer · 2013-09-25 08:07:39Z

Like as JIm Mack Posted, save your collection in an array
first of all insert your question in an array by doing these in your coffeescript:

x = document.getElementById('question-form')
    length = x.length

    i = 0
    question = []
    while i< length
      aaa = x.elements[i]
      question.push
        questions: aaa
      i++

then since you are using Jade-handlebars you need register helpers in your jade file do these

 {{#each arrayify myObject}}
                  {{#each this.name}}
                    p {{questions}}
                  {{/each}}

        {{/each}}

The arrayify and myObject are the handlebars helpers. Then in your coffeescript

Handlebars.registerHelper "arrayify", (obj) ->
  result = []
  for temp in obj
    userQuestion = temp.question
    result.push
      name: userQuestion
  return result

Template.templatename.myObject = ->
  temp = []
  for item in Question.find().fetch()
    temp.push item
  return temp

Hope these will work.

Collectives™ on Stack Overflow

Display json object dynamically

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related