在javascript中获取传递键值的值答案

【问题标题】：Get values passing a key value in javascript在javascript中获取传递键值的值
【发布时间】：2016-05-01 22:50:34
【问题描述】：

我需要创建一种我无法检索某些值的哈希图。情况就是这样；

我有一个带有一些属性的 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。正如您在电影中看到的那样：财产“动作”我们拥有不止一个标签和精确度：

- 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

以此类推。感谢您的帮助！

【问题讨论】：

标签： javascript jquery angularjs json hashmap

【解决方案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

【讨论】：

【解决方案2】：

我会将这些数据映射到一个新结构中，以 genre 或 category 作为顶层，将单个电影作为子级

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

Following 循环遍历所有影片并使用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 来执行此操作，这只需要为每个电影添加一个新的属性名称，即 "film:property" 的值

DEMO

【讨论】：