title: Create HTML list from array of Objects in JS
body: <p>I am using <a href="https://developers.sparkpost.com/api/#/introduction/substitutions-reference" rel="nofollow">SparkPost</a> to display a list of exercises that have been sent to a client. The aim is to create a HTML string that can be sent to the API as <code>substitution_data</code>. </p>
  
  <p>An example of the data I need to split down is:</p>
  
  <pre><code>[{
      "exerciseName": "4 Point Kneeling Lumbar",
      "Params": [{
          "param": "Sets",
          "childParam": "1"
      }, {
          "param": "Reps",
          "childParam": "1"
      }]
  }, {
      "exerciseName": "Side Flexion",
      "Params": [{
          "param": "Sets",
          "childParam": "1"
      }, {
          "param": "Reps",
          "childParam": "1"
      }]
  }]
  </code></pre>
  
  <p>I need to create a string like this: </p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;4 Point Kneeling Lumbar, Sets: 1, Reps: 10&lt;/li&gt;
    &lt;li&gt;Side Flexion, Sets: 1, Reps: 12&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>i.e </p>
  
  <pre><code>var subData = '&lt;ul&gt;&lt;li&gt;4 Point Kneeling Lumbar, Sets: 1, Reps: 10&lt;/li&gt;&lt;li&gt;Side Flexion, Sets: 1, Reps: 12&lt;/li&gt;&lt;/ul&gt;';
  </code></pre>
  
  <p>I have created a <a href="http://codepen.io/Taylorsuk/pen/NNQGmq" rel="nofollow">CodePen</a> that shows the first level (exercise Name) however I am unsure how to access the <code>params</code> and display in the desired structure. </p>