Question

我需要创建一种我无法检索某些值的hashmap。情况就是这样;

我有一个像这样的属性的json：

$scope.getItems = {
        "data": [{
            "label": "first-label",
                "objects": [{
                "name": "firstObj",
                    "attributes": [{
                    "attrname": "Item1",
                        "attrValue": "",
                        "attrType": "text"
                }, {
                    "attrname": "Item2",
                        "attrValue": "",
                        "attrType": "text"
                }]
            }],
               "properties": {
                "film:property": "action"
            }
        },
        {
            "label": "second-label",
                "objects": [{
                "name": "firstObj",
                    "attributes": [{
                    "attrname": "Item1",
                        "attrValue": "",
                        "attrType": "text"
                }, {
                    "attrname": "Item2",
                        "attrValue": "",
                        "attrType": "text"
                }]
            }],
               "properties": {
                "film:property": "action"
            }
        },
        {
            "label": "third-label",
                "objects": [{
                "name": "firstObj",
                    "attributes": [{
                    "attrname": "Item1",
                        "attrValue": "",
                        "attrType": "text"
                }, {
                    "attrname": "Item2",
                        "attrValue": "",
                        "attrType": "text"
                }]
            }],
               "properties": {
                "film:property": "drama"
            }
        },
        {
            "label": "fourth-label",
                "objects": [{
                "name": "firstObj",
                    "attributes": [{
                    "attrname": "Item1",
                        "attrValue": "",
                        "attrType": "text"
                }, {
                    "attrname": "Item2",
                        "attrValue": "",
                        "attrType": "text"
                }]
            }],
               "properties": {
                "film:property": "action"
            }
        },
        {
            "label": "fifth-label",
                "objects": [{
                "name": "firstObj",
                    "attributes": [{
                    "attrname": "Item1",
                        "attrValue": "",
                        "attrType": "text"
                }, {
                    "attrname": "Item2",
                        "attrValue": "",
                        "attrType": "text"
                }]
            }],
               "properties": {
                "film:property": "comic"
            }
        }

        ]
    };

好的，现在，我需要的是film:property和label。正如你可以看到的电影：属性“行动”我们有更多的标签和exaclty：

- first-label
- second-label
- fourth-label

所以假设的树视图可能是：

- action
   - first-label
   - second-label
   - fourth-label

 -drama
   - third-label

 -comic
   -fifth-label

我在这里创建了一个jsfiddle：https://jsfiddle.net/vuqcopm7/58/，其中有相同的json和类似的列表：

<ul data-ng-repeat="object in uniqueNames">
        <li ng-click="getLabelByProp(object)"> 
            <a style="cursor:pointer">{{object}}</a>
        </li>
      </ul>

我需要的是当我点击一个项目时获取具有该属性的标签。例如：

点击动作，我需要在某个地方显示，这不重要，

 - first-label
    - second-label
    - fourth-label

等等。谢谢你的帮助！

Answer 1

我使用过滤器和地图来获得结果。因此，首先过滤匹配属性，然后仅创建一个标签数组，最后得到唯一值：

$scope.getLabelByProp = function(property) {
  var filtered = $scope.getItems.data
                .filter(byProperty(property))
                .map(getLabel)
                .filter(isUnique)
  console.log(filtered);
}

function isUnique(item, idx, items) {
  return items.indexOf(item) === idx;
}

function byProperty(property) {
  return function(item, i, items) {
    return item.properties["film:property"] == property
  }
}

function getLabel(n) {
  return n.label;
}

我对这种独特性不太确定。

fiddle

Answer 2

我会将此数据映射到一个新结构，其中genre或category为顶级，个别电影为儿童

[
  {genre: 'action', films:[]},
  {genre: 'drama', films:[]}
]

循环播放所有电影并使用genre作为关键将电影分组到各自的子阵列中。

var tmp = {};

data.forEach(function(item) {
  var genre = item.properties["film:property"];
  if (!tmp[genre]) {
    tmp[genre] = []
  }
  tmp[genre].push(item)
});

一旦所有都在临时对象中，它就是创建最终范围模型的那些键的简单映射

$scope.filmCats = Object.keys(tmp).map(function(key) {
  return {
    genre: key,
    films: tmp[key]
  }
});

基本HTML

  <div ng-repeat="item in filmCats">
    <h4>{{item.genre}}</h4>
    <ul>
      <li ng-repeat="film in item.films">{{film.label}}
        <ul>
          <li ng-repeat="obj in film.objects">{{obj.name}}</li>
        </ul>
      </li>
    </ul>
  </div>

注意：您也可以使用过滤器groupBy执行此操作，该过滤器只需要为eaach影片添加新属性名称"film:property"

的 DEMO

获取在javascript中传递键值的值

2 个答案: