Looping json object key => array

Question

I'm pulling in a json object, this is the result of a $.parseJSON output. I understand it needs a handler to help it but not to sure what belongs in the helper. Reading the other users questions, they seem to be able to jump through the next hoop due to having a constant key, unfortunately in my case it's always different.

Json output

[
{
    "High blood pressure?": [
        "no",
        "string"
    ]
},
{
    "Cancer?": [
        "no",
        "string"
    ]
},
{
    "Asthma or a breathing disorder?": [
        "no",
        "string"
    ]
}
]

Loop

{{#each screen_data}}
<tr>
    <td class="bold">{{this}}</td>
</tr>
{{/each}}

Results in [Object object][Object object][Object object]......

See http://stackoverflow.com/questions/5113847/accessing-elements-of-json-object-without-knowing-the-key-names — Radu, Oct 24 '12 at 02:42
Was hoping to avoid something like that, hopefully handlebars has something built in that can handle the functionality so it all stays clean — Bankzilla, Oct 24 '12 at 02:49
Ideally you should be using a more consistent self describing (and higher integrity) data representation, but if you're going to go this route with handlebars you should probably create a helper. — Matt Whipple, Oct 24 '12 at 02:49

score 0 · Answer 1 · answered Oct 24 '12 at 02:49

You can try this fiddle below. It will give you all the keys from the JSON data

http://jsfiddle.net/tariqulazam/SjugS/

var data= [
{
    "High blood pressure?": [
        "no",
        "string"
    ]
},
{
    "Cancer?": [
        "no",
        "string"
    ]
},
{
    "Asthma or a breathing disorder?": [
        "no",
        "string"
    ]
}
];

for (var key in data) {
       for (var item in data[key]) {    
           alert(item);
       }
}

Ben Lesh · Accepted Answer · 2012-10-24T03:06:10.223

It's because you've got an array of objects, and that's what you're telling your template to write out.. the object. It seems like you want to write out the only property on the root of the object, which is a question.

try this:

{{#each screen_data}}
<tr>
    <td class="bold">{{this[0]}}</td>
</tr>
{{/each}}

That's a strange JSON structure you have there, I must say. Generally it's considered poor form to use the object property name as a carrier of data like that.

EDIT: I'd recommend changing that structure to something that better represents your data... like so:

[{
    question: "High blood pressure?",
    answers: [
        "no",
        "string"
    ]
},
{
    questions: "Cancer?",
    answers: [
        "no",
        "string"
    ]
},
{
    question: "Asthma or a breathing disorder?",
    answers: [
        "no",
        "string"
    ]
}]

Which would then mean your template would look like so:

{{#each screen_data}}
<tr>
    <td class="bold">{{this.question}}</td>
</tr>
{{/each}}

The `this[0]` doesn't work it throws a tanty. I ended up changing my structure to something close to yours, also included keys to the answers section seeing as you can't reference to the array structure, so had to have another way to reference the values. — Bankzilla, Oct 24 '12 at 03:11

Looping json object key => array

2 Answers2