Skip to content

Instantly share code, notes, and snippets.

@kellishouts
Last active January 19, 2018 20:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kellishouts/4dbeb7efdc54b2b01cb0e41925629e0a to your computer and use it in GitHub Desktop.
Save kellishouts/4dbeb7efdc54b2b01cb0e41925629e0a to your computer and use it in GitHub Desktop.
Help Kelli with Handlebars :T

Is it possible to iterate over this blob of data with handlebars markup, so that no matter how many items there are in misc data it will show them all? Here's my blob:

"misc_data":{  
   "0":{  
      "chopped":"false",
      "product_variation":"Ollie",
      "product_variation_id":"3025",
      "product_title":"Four Olive",
      "quantity":"1"
   },
   "1":{  
      "chopped":"true",
      "product_variation":"Ollie",
      "product_variation_id":"3025",
      "product_title":"Four Olive",
      "quantity":"1"
   },
   "2":{  
      "product_variation":"Ollie",
      "product_variation_id":"3025",
      "product_title":"Four Olive",
      "gold_trim":"false",
      "custom_text":"Things with Flowers all over it.",
      "shapes":"Circles"
   }
  }

I know I can target a specific item like this:

<p>{{misc_data.0.chopped}}</p>

And it will render this:

<p>true</p>

However what I want is some kinda markup, maybe with an {{#each ...}} so that no matter items there are I can show all the stuff in it. The result I want is for it to literally render everything:

<ul>
  <li>
    <p>0</p>
    <p>chopped: false</p>
    <p>product_variation: Ollie</p>
    <p>product_title: this value etc...</p>
    <p>this thing: this value etc...</p>
  </li>
  <li>
    <p>1</p>
    <p>this thing: this value</p>
    <p>this thing: this value</p>
    <p>this thing: this value</p>
    <p>this thing: this value</p>
  </li>
  <li>
    <p>2</p>
    <p>this thing: this value</p>
    <p>this thing: this value</p>
    <p>this thing: this value</p>
    <p>this thing: this value</p>
    <p>this thing: this value</p>
    <p>this thing: this value</p>
  </li>
</ul>

how? O__O it is probably an easy thing. i just dunno.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment