将多维 JSON 键值对转换为 Angular 菜单（无需 Angular 知识）

Question

我在这里问了这个问题：

Working With Dynamic Multidimensional key-value pairs in JSON

但它变得更加复杂，我无法从那个答案中得到我的目标。如果我有一个如下所示的数据对象：

{
    "email": "user@someco.com",
    "firstname": "Bob",
    "lastname": "Smith",
    "company": "ACME",
    "custom": {
        "services": [
            {
                "name": "svc1",
                "desc": "abcdefg",
                "selected": "true",
                "status": "None"
            },
            {
                "name": "svc2",
                "desc": "abcdefg",
                "selected": "true",
                "status": "None"
            },
            {
                "name": "svc3",
                "desc": "abcdefg",
                "selected": "false",
                "status": "None"
            },
            {
                "name": "svc4",
                "desc": "abcdefg",
                "selected": "false",
                "status": "None"
            }
        ],
        "fields": [
            {
                "name": "Products",
                "desc": "abcdef",
                "type": "multi",
                "values": [
                    {
                        "name": "Product1",
                        "desc": "abcdef"
                    },
                    {
                        "name": "Product2",
                        "desc": "abcdef"
                    }
                ],
                "services": [
                    "svc1",
                    "svc2",
                    "svc3"
                ]
            },
            {
                "name": "Wines",
                "desc": "abcdef",
                "type": "multi",
                "values": [
                    {
                        "name": "Wine 1",
                        "desc": "abcdef"
                    }
                ],
                "services": [
                    "svc4"
                ]
            },
            {
                "name": "Fruits",
                "desc": "abcdef",
                "type": "multi",
                "values": [
                    {
                        "name": "Fruit 1",
                        "desc": "abcdef"
                    },
                    {
                        "name": "Fruit 2",
                        "desc": "abcdef"
                    }
                ],
                "services": [
                    "svc4"
                ]
            }
        ]
    }
};

如何将其转换为 Angular 菜单？菜单需要列出所有服务，然后如果服务在“字段”中有关联的项目，则该项目应列在其下方。因此，例如“svc1”和它的描述应该列在一行上（让它工作）但是“Product1”和“Product2”及其描述应该出现在接下来的两行，因为你可以看到“svc1”列在“产品”的“服务”字段。同样，“svc4”应该出现在一行，然后“Wines”及其描述出现在下一行，因为“svc4”出现在“Wines”的“services”字段中。

我认为最好的方法是在 Angular 控制器中按顺序解包并重新打包这个 JSON 对象，然后将这些数据推送到 Angular 视图中，但可能存在仅使用视图中可用逻辑的解决方案。我已经按照这些思路尝试了一堆嵌套的 fors 和 ifs（非常不工作）：

var i, j;
var listArray = [];
      for (i = 0; i < $scope.svcs.length; i++) {
          var littleArray = [$scope.svcs[i].status, $scope.svcs[i].name, $scope.svcs.desc];
          listArray.push[littleArray1];
        for (j=0; j < $scope.jFA.length; j++) {
          if ($scope.jFA[j] == $scope.svcs[i].name) {
            if ($scope.jFA[j] == $scope.svcs[i].fields)
            littleArray = [$scope.jFA[j].fields] //...etc
          }
        }

...但是这种逻辑越来越密集，无论我现在尝试使用它，它都无法正常工作。我喜欢另一个问题的简单答案，但没有成功复制它。

因此，如果有人可以帮助我弄清楚如何使用 JS 将数据放入正确的序列中，我可以处理 Angular 部分。或者，如果您是 Angular 高手并且有类似的答案，那就更好了。

Answer 1

所以理解你的问题有点困难，但我尽了最大努力。这个小提琴是否显示了您想要实现的目标？ http://jsfiddle.net/arknr6qz/1/

JS：

var app = angular.module('TestApp',[]);

app.controller('TestController', function($scope)
{

    $scope.checkService = function(service, fieldServices)
    {
        if (fieldServices.indexOf(service) != -1) return true;
        return false;
    };


    $scope.data = {
        "email": "user@someco.com",
        "firstname": "Bob",
        "lastname": "Smith",
        "company": "ACME",
        "custom": {
            "services": [
                {
                    "name": "svc1",
                    "desc": "abcdefg",
                    "selected": "true",
                    "status": "None"
                },
                {
                    "name": "svc2",
                    "desc": "abcdefg",
                    "selected": "true",
                    "status": "None"
                },
                {
                    "name": "svc3",
                    "desc": "abcdefg",
                    "selected": "false",
                    "status": "None"
                },
                {
                    "name": "svc4",
                    "desc": "abcdefg",
                    "selected": "false",
                    "status": "None"
                }
            ],
            "fields": [
                {
                    "name": "Products",
                    "desc": "abcdef",
                    "type": "multi",
                    "values": [
                        {
                            "name": "Product1",
                            "desc": "abcdef"
                        },
                        {
                            "name": "Product2",
                            "desc": "abcdef"
                        }
                    ],
                    "services": [
                        "svc1",
                        "svc2",
                        "svc3"
                    ]
                },
                {
                    "name": "Wines",
                    "desc": "abcdef",
                    "type": "multi",
                    "values": [
                        {
                            "name": "Wine 1",
                            "desc": "abcdef"
                        }
                    ],
                    "services": [
                        "svc4"
                    ]
                },
                {
                    "name": "Fruits",
                    "desc": "abcdef",
                    "type": "multi",
                    "values": [
                        {
                            "name": "Fruit 1",
                            "desc": "abcdef"
                        },
                        {
                            "name": "Fruit 2",
                            "desc": "abcdef"
                        }
                    ],
                    "services": [
                        "svc4"
                    ]
                }
            ]
        }
    };
});

HTML：

<div ng-app="TestApp">
    <div ng-controller="TestController">
        <div ng-repeat="service in data.custom.services">
            {{ service.name }}
            <div class="indent" ng-repeat="fields in data.custom.fields">
                <span ng-if="checkService(service.name, fields.services)">
                    {{fields.services.values}}
                    <span ng-repeat="value in fields.values">
                        {{value.name}} - {{value.desc}}<br>    
                    </span>
                </span>
            </div>
        </div>
    </div>
</div>

最后是css：

.indent {
    margin-left:10px;
}