如何在Angular中输出特定的嵌套JSON对象？

Question

I'm a rank newbie to Angular, and I'm attempting to port an old jQuery-based app to NG. The JSON I'm starting with (parsed from an XML file) looks like this:

{
    "setUps":{
        "cartImage":
        {
            "_cartIm":"addtocart.gif",
            "_cartIm_o":"addtocart.gif"
        }
        ,"_supportImsPath":"/"
    },
    "product":
    {
        "matrix":
        {
            "thumbnails":[
                {
                    "_myLabel":"Antique Brass Distressed",
                    "_thumbImage":"3",
                    "_cartCode":"160"
                },
                {
                    "_myLabel":"Antique Brass Light",
                    "_thumbImage":"156",
                    "_cartCode":"156"
                },
                {
                    "_myLabel":"Old Iron",
                    "_thumbImage":"ap",
                    "_cartCode":"157"
                },
                {
                    "_myLabel":"Oil-Rubbed Bronze",
                    "_thumbImage":"ob",
                    "_cartCode":"3"
                }
            ],
            "_myLabel":"Finishes"
        },
        "_Title":"Flower Cabinet Knob",
        "_itNum":"100407x"
    }
}

What I need to do with this is output specific elements on my template - first and foremost, the matrix object with its associated thumbnails. In this example, there is only one matrix, but for many of the products there are multiples, each with their own thumbnail arrays.

This is the controller:

var XMLt = angular.module("XMLtest",[]);
XMLt.factory("Xfactory",function($http){
    var factory = [];
    factory.getXML = function(){
        return $http.get(productXML);
    }
    return factory;
});

XMLt.controller("Xcontroller",function($scope,Xfactory) {
    $scope.Xcontroller = [];
    loadXML();
    function loadXML() {
        Xfactory.getXML().success(function (data) {
            var x2js = new X2JS();
            prodData = x2js.xml_str2json(data);
            $scope.thisItem = prodData.contents;
            $scope.matrices = [];
            angular.forEach($scope.thisItem.matrix,function(value,key)
            {
                $scope.matrices.push(value,key);
            });
        });
    }
});

And this is my view template:

<div ng-controller="Xcontroller">
    <h2>Title: {{ thisItem.product._Title }}</h2>
    <div ng-repeat="thisMatrix in thisItem.product" class="matrix">
        {{ thisMatrix._myLabel }}
    </div>
</div>

My problem is that this ng-repeat, not surprisingly, returns a div for every child element of the product that it finds, not just the matrix. So I wind up with a couple of empty divs (for _Title and _itNum) in addition to the matrix div.

I've seen quite a few examples of filtering by comparing value literals, but they don't seem to apply in this case. I also tried writing a custom filter:

$scope.isObjType = function(input) {
    return angular.isObject(input);
};

<div ng-repeat="thisMatrix in thisItem.product | filter:isObjType(matrix)">

That seemed to have no effect, still returning the extraneous divs. I can't seem to wrap my head around how I'd limit the repeat to a specific object type. Am I thinking of this the completely wrong way? If so, I'd welcome any input.

Answer 1

Since you only have one matrix, you don't need the repeat for the matrix label. You only need it for the thumbnails.

<div ng-controller="Xcontroller">
    <h2>Title: {{ thisItem.product._Title }}</h2>
    <div class="matrix">
        {{ thisItem.product.matrix._myLabel }}
        <div ng-repeat="thisThumbnail in thisItem.product.matrix.thumbnails" class="thumbnail">           
            {{thisThumbnail._myLabel}}
        </div>
    </div>
</div>

If it were possible to have multiple matrixes, the object would need to be modified to be able to represent that (by wrapping the matrix object in an array.)

Update per comments:

If you have the possiblity of multiple matrixes, you will need to modify the object to ensure that it is consistent when there is 1 vs when there are 2+.

<div ng-controller="Xcontroller">
    <h2>Title: {{ thisItem.product._Title }}</h2>
    <div ng-repeat="thisMatrix in thisItem.product.matrix" class="matrix">
        {{ thisMatrix._myLabel }}
        <div ng-repeat="thisThumbnail in thisMatrix.thumbnails" class="thumbnail">           
            {{thisThumbnail._myLabel}}
        </div>
    </div>
</div>

and in controller:

XMLt.controller("Xcontroller",function($scope,Xfactory) {
    $scope.Xcontroller = [];
    loadXML();
    function loadXML() {
        Xfactory.getXML().success(function (data) {
            var x2js = new X2JS();
            prodData = x2js.xml_str2json(data);
            // must always have an array of matrixes
            if (!prodData.contents.product.matrix.slice) {
                prodData.contents.product.matrix = [prodData.contents.product.matrix];
            }
            $scope.thisItem = prodData.contents;
            $scope.matrices = [];
            angular.forEach($scope.thisItem.matrix,function(value,key)
            {
                $scope.matrices.push(value,key);
            });
        });
    }
});