How to concatenate a dynamic variable on to a object path

Question

I have an object of objects using Angular, and categoryOne'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 loadContent function below the object of objects--to remove categoryOne's content from the page and inject categoryTwo's content in its place.

In my loadContent function, I want to target each object of categoryTwo's content object. In other words, $scope.layout.categories.categoryTwo.content.contentX.text where "X" could be 1 or 2.

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.

tl;dr How can I concatenate a dynamic variable on to a path that is trying to grab stuff from an object of objects?

Thank you so much for helping me. Virtual high fives for all of you.

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 < catLength; x++)
        {
            $(".cool-container").append("<p class='content'>" + $scope.layout.categories.categoryTwo.content.contentX.text + "</p>");
            // Where it says "contentX" in the line above, I want "X" to be a dynamic variable that will make it "content1" and "content2"
        }
    }
}]);

Possible duplicate of [Dynamically access object property using variable](http://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable) — Félix Adriyel Gagnon-Grenier, Dec 14 '16 at 00:04

score 0 · Accepted Answer · answered Dec 13 '16 at 23:59

0

You can do $scope.layout.categories.categoryTwo.content["content" + X].text

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

answered Dec 13 '16 at 23:59

carebdayrvis

175
9

This did it! I tried ...content.content[x].text but that produced an error of undefined. This, however, did the trick! Thanks! – HuskyBlue Dec 14 '16 at 00:21

score 0 · Answer 2 · answered Dec 13 '16 at 23:59

0

Use bracket syntax instead of dot syntax if you need a dynamic object accessor:

E.g.

object['content' + x]

How to concatenate a dynamic variable on to a object path

2 Answers2