Question

我已经设法将一些代码组合在一起，这些代码在json的帮助下以json的形式出现在html中。

<div class="activity" ng-app="stream" ng-controller="streamCtrl">


<ul ng-repeat="x in myData">
<p class="author"><a href="https://hypothes.is/stream?q=user:{{x.user}}">{{x.user}}</a></p>
<p class="context_title"><a class="context" href="{{x.links.incontext}}">{{x.document.title}}</a></p>
<p class="exact">{{x.target[0].selector[2].exact}}</p>

<p class="text" btf-markdown="x.text">{{x.text}}</p>
<span ng-click="loadFromMenu($parent.$index)" ng-repeat="y in x.tags">
      <a href="https://hypothes.is/stream?q=tag:{{y}}">[{{y}}]</a>
</span>
<p class="reply"><a href="{{x.links.incontext}}">reply</a></p>
<br>
</ul>

一切正常，但我注意到键的位置称为“精确”

<p class="exact">{{x.target[0].selector[2].exact}}</p>

“选择器”中的

更改。一些api响应在第三个子阵列中返回，有些在第四个子阵列中......它会变化。

这是一个示例json段 - 正如您可以看到“exact”在选择器中的第三个子阵列中。

{
    "total": 9,
    "rows":
    [
        {
            "updated": "2016-07-19T20:46:47.509685+00:00",
            "group": "__world__",
            "target":
            [
                {
                    "source": "http://...",
                    "selector":
                    [
                        {
                            "endContainer": "/div[3]/div[1]/div[1]/section[1]/div[1]/p[98]",
                            "startContainer": "/div[3]/div[1]/div[1]/section[1]/div[1]/p[97]/b[1]",
                            "type": "RangeSelector",
                            "startOffset": 0,
                            "endOffset": 0
                        },
                        {
                            "type": "TextPositionSelector",
                            "end": 22803,
                            "start": 22676
                        },
                        {
                            "exact": "Are ...",
                            "prefix": "esearch...",
                            "type": "TextQuoteSelector",
                            "suffix": "List of References Berkeley,"
                        }
                    ]
                }
            ],
            "links":
            {
                "json": "https://..",
                "html": "https://..",
                "incontext": "https://.."
            },
            "tags":
            [
                "a",
                "b"
            ],
            "text": "They ..",
            "created": "2016-07-19T20:46:47.509677+00:00",
            "uri": "http://..",
            "user": "user",
            "document":
            {
                "title":
                [
                    "A Morning .."
                ]
            },
            "id": "6SDjLE3xEeaEfYfRR17PhA",
            "permissions":
            {
                "read":
                [
                    "group:__world__"
                ],
                "admin":
                [
                    "user"
                ],
                "update":
                [
                    "user"
                ],
                "delete":
                [
                    "user"
                ]
            }
        },
...
]}

我的问题是 - 无论“选择器”中的数组数量是多少，确保角度总是访问“精确”的最佳方法是什么？

Answer 1

您可以编写一个循环遍历所有selector的函数来查找exact并返回其值

var o = {
  "target": [{
    "source": "http://...",
    "selector": [{
      "endContainer": "/div[3]/div[1]/div[1]/section[1]/div[1]/p[91]/b[1]",
      "startContainer": "/div[3]/div[1]/div[1]/section[1]/div[1]/p[91]/b[1]",
      "type": "RangeSelector",
      "startOffset": 0,
      "endOffset": 266
    }, {
      "type": "TextPositionSelector",
      "end": 22559,
      "start": 22293
    }, {
      "exact": "If we consider ...",
      "prefix": " blablah. Someone:",
      "type": "TextQuoteSelector",
      "suffix": "Someone2: In filmmaking as researc"
    }]
  }]
}

function getValueInObj(obj, key) {
  return obj.target[0].selector.find(function(_o) {
    return _o[key];
  })[key];
}

console.log(getValueInObj(o, "exact"));

您必须在此函数中传递当前对象：

<p class="exact">{{getValueInObj(x)}}</p>

注意：我假设您只需要第一个精确值。 IE也不支持Array.find。如果您想使其兼容，可以添加polyfill，也可以尝试Array.filter

Answer 2

如果我说得对，那么x.target[0]的所有选择器中你只关心那个（{可能不止一个？）并且exact。{/ p>

过滤精确该谓词的选择器应该完成这项工作：

<!-- Edit: here was a suggested answer that didn't even parse correctly. See below. -->

请注意，.filter()会返回所有匹配元素的列表，因此您必须自己选择其中一个结果（[0]）。

另请注意，我使用ES2015 .find()编写了ES5以减少混淆（并且truthy对于过滤谓词来说已经足够了）你可以将它更多地钻到机器人

<p class="exact">{{ x.target[0].selector.find(x => x.exact).exact }}</p>

编辑：似乎你不能在没有解析器hick-up的情况下在模板表达式中编写{。

可以通过将过滤谓词移动到$scope：

来避免这种情况

// in the controller
$scope.hasExactProperty = function(selector) {
  return selector.exact !== undefined;
};

<!-- in the template -->
<p class="exact">{{ x.target[0].selector.filter(hasExactProperty)[0].exact }}</p>

或者您将x的整个处理移至$scope（然后我们或多或少Rajesh's answer）：

// in the controller
$scope.getExact = function(x) {
  return x.target[0].selector.filter(function(x) {
    return x.exact !== undefined;
  })[0].exact;
};

<p class="exact">{{ getExact(x) }}</p>

请注意，如果您通过this.hasExactProperty使用控制器，则必须指定this.getExact / controllerAs。

如何使用ng-repeat访问移动嵌套数组中的键？

2 个答案: