title: How do I create an javascript object dynamically?
body: <p>I am trying to create an object of locations for placing points on a map. </p>
  
  <p>My code is:</p>
  
  <pre><code>    var Locs = [{}];
      var title = '', content = '';
  
      for (i = 0; i &lt; locations.length; i++) {
  
  
        content = '&lt;div id="bodyContent"&gt;' +
                  '&lt;p&gt;&lt;b&gt;' + locations[i][0] + '&lt;/b&gt;&lt;br /&gt;' +
                  locations[i][4] +
                  '&lt;/div&gt;';
  
           Locs[i]['lat']   = locations[i][1];
           Locs[i]['lon']   = locations[i][2];
           Locs[i]['zoom']  = zoom;
           Locs[i]['title'] = locations[i][0];
           Locs[i]['html']  = content;
  
      }
  </code></pre>
  
  <p>I keep getting an error: <code>TypeError: Locs[i] is undefined</code>
  If I replace i with 0 it works for displaying one point on the map. </p>
  
  <p>What I need to output is:</p>
  
  <pre><code>var Locs = [
      {
          lat: 45.9,
          lon: 10.9,
          zoom: 3,
          title: 'Title A1',
          html: '&lt;h3&gt;Content A1&lt;/h3&gt;'
      },
      {
          lat: 44.8,
          lon: 1.7,
          zoom: 3,
          title: 'Title B1'
          html: '&lt;h3&gt;Content B1&lt;/h3&gt;'
      },
      {
          lat: 51.5,
          lon: -1.1,
          zoom: 3,
          title: 'Title C1',
          html: '&lt;h3&gt;Content C1&lt;/h3&gt;'
      }
  ];
  </code></pre>
  
  <p>So I am wondering if someone can explain to me what I don't understand about creating an object dynamically? </p>