title: Looping through Javascript Object and adding to HTML Div
body: <p>I am working on a game and have run into a problem that I have been stuck on for hours. I have an object, and I want to write a loop which will take all the values in this object, and stick them into an html div. The way I am doing this is, I have taken a div, I am cloning it and giving all the child elements new values. Then I want to use the DOM manipulation to insert the values from one key, into a div with a heading and two paragraphs. Here is the code.</p>
  <p>Index.html</p>
  <pre><code>&lt;div id = &quot;all_asset&quot; style = &quot;display: none;&quot;&gt;
      &lt;div class = &quot;touch_box col-sm-12&quot; style = &quot;height: 150px; display: none;&quot; id = &quot;asset_touchbox&quot;&gt;
          &lt;br&gt;&lt;h id = &quot;asset_name&quot;&gt;&lt;/h&gt;
          &lt;p1 id = &quot;asset_price&quot;&gt;&lt;/p1&gt;&lt;hr&gt;
          &lt;p id = &quot;asset_age&quot;&gt;&lt;/p&gt;&lt;hr&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  <p>play.js</p>
  <pre><code>function assetsList(){
      Object.keys(assets).forEach(key =&gt; {
          for (var i = 1; i &lt; Object.keys(assets).length; i++){
      
              //duplicate box
              var list_box = document.getElementById(&quot;asset_touchbox&quot;);
              var clone_box = list_box.cloneNode(true);
              clone_box.id = &quot;list_assets&quot; + String(i);
              document.getElementById(&quot;all_asset&quot;).appendChild(clone_box);
  
              //get id of child elements
              clone_box.getElementsByTagName('h')[0].id = &quot;asset_name&quot; + String(i);
              clone_box.getElementsByTagName('p1')[0].id = &quot;asset_price&quot; + String(i);
              clone_box.getElementsByTagName('p')[0].id = &quot;asset_age&quot; + String(i);
              list_box.parentNode.appendChild(clone_box);
              //show box
              clone_box.style.display = &quot;block&quot;;
  
              var asset_name = assets[key][0];
              var asset_age = assets[key][1];
              var asset_price = assets[key][2];
  
              document.getElementById(&quot;asset_name&quot; + String(i)).innerHTML = asset_name;
              document.getElementById(&quot;asset_price&quot; + String(i)).innerHTML = asset_age;
              document.getElementById(&quot;asset_age&quot; + String(i)).innerHTML = asset_price;
          }
        });      
  }
  </code></pre>
  <p>Javascript Object</p>
  <pre><code>//asset name, asset age, asset cost
  assets = {1: [&quot;Boat&quot;, 0, &quot;10000&quot;], 2: [&quot;Carriage&quot;, 0, &quot;10000&quot;]}
  </code></pre>
  <p>So what I pretty much want to do is - Create two divs, each one has the information from each key. I hope I made sense. Please let me know if I didn't. Thanks!</p>