Преобразование многомерных пар ключ-значение JSON в угловое меню (знание углов не требуется)

0

Я задал этот вопрос здесь:

Работа с динамическими многомерными парами ключ-значение в JSON

Но это становится немного более сложным, и я не могу понять, откуда я иду от этого ответа. Если у меня есть объект данных, который выглядит так:

{
    "email": "[email protected]",
    "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"
                ]
            }
        ]
    }
};

Как я могу преобразовать это в Угловое меню? В меню должно быть указано все службы, а затем, если служба имеет связанный элемент в "полях", этот элемент должен быть указан под ним. Так, например, "svc1" и его описание должно быть указано в строке (получило эту работу), но затем "Product1" и "Product2" с их описаниями должны появиться в следующих двух строках, потому что вы можете видеть, что "svc1" указан в поле "services" для "Продукты". Аналогично, "svc4" должен появиться на линии, а затем "Вина" и его описание на следующей строке, потому что "svc4" появляется в поле "services" в разделе "Wines".

Я думаю, что лучший способ - распаковать и повторно упаковать этот объект JSON в последовательном порядке в угловом контроллере, а затем вывести эти данные в угловое представление, но может быть решение, использующее только логику, доступную из представления. Я пробовал кучу вложенных 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, я могу обрабатывать угловую часть. Или, если вы являетесь Угловым свистом и имеете ответ на эти линии, еще лучше.

  • 1
    И нет, я не могу переупорядочить существующие данные ...
  • 1
    Отображение данных в первую очередь является наиболее практичным подходом. Не совсем понятно, каковы ожидаемые результаты. Чтение этих данных не делает их интуитивно понятными. Демонстрация, включающая примеры данных и HTML-представление результатов, поможет
Показать ещё 1 комментарий
Теги:

1 ответ

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": "[email protected]",
        "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;
}
Поделиться
  • 0
    Ронни, вы близки, но вы возвращаете имена полей, когда мне действительно нужно то, что находится в значениях. Скрипт ожидаемого выхода здесь: jsfiddle.net/rdLznaz7
  • 1
    Так что вам придется ng-repeat еще раз. Как это? jsfiddle.net/arknr6qz/1 Я полагаю, что ваш ожидаемый результат неверен на последнем сервисе. Это должно быть wine 1, fruit 1, fruit 2 поскольку услуга 4 присутствует в винах и фруктах.
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню