title: How to concatenate a dynamic variable on to a object path
body: <p>I have an object of objects using Angular, and <code>categoryOne</code>'s content is automatically loaded on my page. If a button is clicked, I want to call a function in my controller--that would be the <code>loadContent</code> function below the object of objects--to remove <code>categoryOne</code>'s content from the page and inject <code>categoryTwo</code>'s content in its place.</p>
  
  <p>In my <code>loadContent</code> function, I want to target each object of <code>categoryTwo</code>'s <code>content</code> object. In other words, <code>$scope.layout.categories.categoryTwo.content.contentX.text</code> where "X" could be 1 or 2.</p>
  
  <p>The thing is, I cannot find anything on the web about concatenating a dynamic variable on to a "path" that is targeting stuff in an object. In the paragraph above, "X" is the dynamic variable and this "path" I'm referring to is the stuff I'm trying to grab from my object of objects, if that makes sense.</p>
  
  <p><strong>tl;dr</strong> How can I concatenate a dynamic variable on to a path that is trying to grab stuff from an object of objects?</p>
  
  <p>Thank you so much for helping me. Virtual high fives for all of you.</p>
  
  <pre><code>var app = angular.module("app1", []).controller("appCtrl", ["$scope", "$http", function($scope, $http)
  {
      $scope.layout = 
      {
          "name": "test_proj",
          "title": "Test Project",
          "categories":
          {
              "categoryOne":
              {
                  "heading": "Category 1",
                  "links":
                  {
                      "link1": "www.domain.com"
                  },
                  "content":
                  {
                      "content1":
                      {
                          "text": "This is some text.",
                          "help": "Help text 1."
                      },
                      "content2":
                      {
                          "text": "Apples.",
                          "help": "Help text 2."
                      }
                  }
              },
              "categoryTwo":
              {
                  "heading": "Category 2",
                  "links":
                  {
                      "link1": "www.generic.com"
                  },
                  "content":
                  {
                      "content1":
                      {
                          "text": "More text here.",
                          "help": "Help text 1."
                      },
                      "content2":
                      {
                          "text": "Oranges.",
                          "help": "Help text 2."
                      }
                  }
              }
          }
      }
  
  
      $scope.loadContent = function()
      {
          var catLength = 0;
  
          for (var key in $scope.layout.categories.categoryTwo.content)
          {
              if ($scope.layout.categories.categoryTwo.content.hasOwnProperty(key))
              {
                  ++catLength;
              }
          }
  
          $(".cool-container").html("");
  
          for (var x = 0; x &lt; catLength; x++)
          {
              $(".cool-container").append("&lt;p class='content'&gt;" + $scope.layout.categories.categoryTwo.content.contentX.text + "&lt;/p&gt;");
              // Where it says "contentX" in the line above, I want "X" to be a dynamic variable that will make it "content1" and "content2"
          }
      }
  }]);
  </code></pre>