title: Loop through an array of objects and create a new object
body: <p>I have an array of objects, each object has a title, content and contentHTML. I want to map over this array and create a new object. The new object will take the value of the title property and use this as the parent property for each of the content and contentHTML properties. The code below only seems to be getting the last object in the array.  </p>
  
  <p><strong>The results is:</strong></p>
  
  <pre><code>{
    "sidebar": {
        "text": "Some sidbar text here",
        "content": "&lt;p&gt;Some sidebar text here&lt;/p&gt;"
      }
  }
  </code></pre>
  
  <p><strong>The expected result is:</strong></p>
  
  <pre><code>{
      header: {
          text: "Some header text here",
          content: "&lt;p&gt;Some header text here&lt;/p&gt;"
      },
      footer: {
          text: "Some footer text here",
          content: "&lt;p&gt;Some footer text here&lt;/p&gt;"
      },
      sidebar: {
          text: "Some sidbar text here",
          content: "&lt;p&gt;Some sidebar text here&lt;/p&gt;"
      }
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var originalObj = [{
      title: "header",
      content: "Some header text here",
      contentHTML: "&lt;p&gt;Some header text here&lt;/p&gt;"
    },
    {
      title: "footer",
      content: "Some footer text here",
      contentHTML: "&lt;p&gt;Some footer text here&lt;/p&gt;"
    },
    {
      title: "sidebar",
      content: "Some sidbar text here",
      contentHTML: "&lt;p&gt;Some sidebar text here&lt;/p&gt;"
    }
  ];
  let newObject = {};
  for (let item of originalObj) {
    var tempObj = {
      [item.title]: {
        text: item.content,
        content: item.contentHTML
      }
    };
    newObject = tempObj;
  }
  console.log(newObject);</code></pre>
  </div>
  </div>
  </p>