将多维JSON键值对转换为Angular菜单(不需要Angular知识)

Converting Multidimensional JSON key-value pairs into an Angular Menu (no Angular knowledge required)

本文关键字：Angular 菜单 知识 不需要 JSON 键值对 转换      更新时间：2023-09-26

我在这里问了这个问题:

在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菜单?菜单需要列出所有服务，然后如果服务在"fields"中有关联项，则该项应列在其下方。因此，例如"svc1"和它的描述应该列在一行(得到了工作)，但是"Product1"answers"Product2"及其描述应该出现在下两行，因为您可以看到"svc1"列在"产品"的"服务"字段中。类似地，"svc4"应该出现在一行，然后"Wines"及其描述应该出现在下一行，因为"svc4"出现在"Wines"的"services"字段中。"

我认为最好的方法是在Angular控制器中按顺序解包和重新打包这个JSON对象，然后将这些数据推送到Angular视图中，但也可能有一个解决方案，只使用视图中可用的逻辑。我已经尝试了一堆嵌套的for和if沿着这些行(非常不工作):

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高手，并且有这些问题的答案，那就更好了。

所以理解你的问题有点困难，但我已经尽力了。这个小提琴是否显示了你想要达到的目标? 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;
}
相关文章：