如何将角度中的单个 json 数据“值”绑定到命名的 $scope 变量（使用 SPARQL 查询返回的数据）？答案

【问题标题】：How to bind individual json data "values" in angular to named $scope variables (data returned using SPARQL query)?如何将角度中的单个 json 数据“值”绑定到命名的 $scope 变量（使用 SPARQL 查询返回的数据）？
【发布时间】：2015-08-25 11:37:12
【问题描述】：

对于 Angular 的新手，如果是一个愚蠢的问题，我们深表歉意。已经检查了有关数据多样性、堆栈溢出、谷歌的其他问题...... 检查了 w3c 并尝试了几次“尝试一下，看看解决方案”，但就是无法让它发挥作用。

基本上，我使用 Angular 将 SPARQL 查询的结果绑定到数据集/查询中的类和类数使用 Fuseki Server 1-1.1.2 端点 (SPARQL 1.1)。（问题后见下面的代码）。

这很好地列出了 URI 格式的类名和 URI 格式的实例计数，但我只想在结果中看到“类”的“#”之后的字符，而不是整个 URI。

我最初尝试在 SPARQL 查询中使用查询中的 REPLACE 和 STRAFTER 函数（即 SELECT (strafter(str(?class),"#") AS ?className)）在 Fuseki 中直接运行良好但返回空白导致尝试的角度绑定。

通过阅读其他答案，我知道 getLocalName() 并且并非所有数据在“#”之后都有本地名称，但我需要访问 JavaScript 中“#”之后的部分。所以我的问题是这个....

为了对返回的数据执行 URI/字符串操作，我想知道如何将返回的单个数据项绑定到单个范围变量，即而不是 $scope.results = response.results.bindings 我可以做类似 $scope.results.class= response.results.bindings.class.value 的事情吗？（当我尝试它时它不起作用，也没有将“results.bindings.class.value”传递给字符串描述函数，因为我不知道如何在 ng-repeat 中调用它）。

所以请总结一下，您能告诉我如何将单个 json“值”绑定到命名的 $scope 变量吗？

感谢您的任何帮助。我必须使用 SPARQL、javascript/HTML/angular 来完成。

这是我的代码。

<!DOCTYPE html>
<html >
<script src=     "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="queryCtrl"><table>
 <tr ng-repeat="x in results">
    <td>{{x.class.value}}</td>
    <td>{{x.count.value}}</td>
  </tr>
</table></div>

<script>
var app = angular.module('myApp', []);
app.controller('queryCtrl', function($scope, $http) {
   var query = encodeURIComponent("SELECT  ?class (COUNT(?s) AS ?count ) { ?    s a ?class } GROUP BY ?class ORDER BY ?count");
   var endpoint = "http://localhost:3030/dataset/query";
   $scope.results = [];
   $http.get("http://localhost:3030/dataset/query?    query="+query+"&output=json")
   .success(function (response) {
    $scope.results = response.results.bindings;
    /* for debugging*/
    if ( window.console && window.console.log ) {
       // console is available, write message if something has happened
       console.log(response.results);
    }
   });

});
</script>

</body>
</html>

【问题讨论】：

标签： json angularjs string binding sparql

【解决方案1】：

如果我正确理解您的问题，您希望绑定到 json 数据，但只在类值视图中显示 # 之后的子字符串。这可以通过在x.class.value 上应用过滤器来完成。所以你会怎么做：

假设您的数据以以下形式返回：

{"results": {"bindings": [
  {"class": {"value": "http://foo.bar#foo"}, "count": {"value": 123}}
  ]
}}

检索一个 json 文件并使用返回值填充范围变量：

app.controller('queryCtrl', function($scope, $http) {
  $scope.results = [];
  $http.get("results.json")
    .then(function (response) {
      $scope.results = response.data.results.bindings;
    });
});

在视图中应用过滤器：

<td>{{x.class.value | myFilter}}</td>

定义过滤器以提取#之后的子字符串：

app.filter('myFilter', function() {
  return function(name) {
    var n = name.indexOf('#');// or lastIndexOf
    return name.substring(n + 1);
  }
});

这是一个有效的plunker。

附言您可以将示例中的所有查询逻辑移动到可重用的服务/工厂，这将使您的应用程序更清洁。

【讨论】：

克里斯谢谢。我根本无法让过滤器工作，然后又对过滤器进行了一次 bash 并得出了几乎相同的解决方案，但您的代码更整洁，所以我会试一试。多谢。谢谢。

【解决方案2】：

在这上面花了一天时间，一个解决方案就是将类 URI 表示形式转换为 SPARQL 查询中的字符串，并在 ng-repeat 中使用自定义角度过滤器。

所以不是

  <tr ng-repeat="x in results">
    <td>{{ x.class.value}}</td>
    <td>{{ x.count.value }}</td>
  </tr>

我有

  <tr ng-repeat="x in results">
    <!--<td>{{ x }}</td>-->
    <td>{{ x.className.value | localClassName}}</td>
    <td>{{ x.count.value }}</td>
  </tr>

代替

SELECT ?class (COUNT(?s) AS ?count) {?s a ?class} GROUP BY ?class ORDER BY     DESC(?count)

我有

SELECT (str(?class) AS ?className) (COUNT(?s) AS ?count) {?s a ?class} GROUP     BY ?class ORDER BY DESC(?count)

附加到 angular.module.controller 的是新的过滤器“localClassName”

.filter("localClassName", function(){
        return function(value){
            /*var startName = value.indexOf("#") + 1;*/
            return String(value).slice(value.indexOf("#") + 1);
        }
   })

现在整个代码如下：

<!DOCTYPE html>
<html>
<script src=         "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="queryCtrl">

<table>
  <tr ng-repeat="x in results">
    <td>{{ x.className.value | localClassName}}</td>
    <td>{{ x.count.value }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('queryCtrl', function($scope, $http) {
   var query = encodeURIComponent("SELECT (str(?class) AS ?className)     (COUNT(?s) AS ?count) {?s a ?class} GROUP BY ?class ORDER BY DESC(?count)");
   var endpoint = "http://localhost:3030/dataset/query";
   $http.get("http://localhost:3030/dataset/query?    query="+query+"&output=json&stylesheet=")
   .success(function (response) {
    $scope.results = response.results.bindings;
    /* for debugging*/
    if ( window.console && window.console.log ) {
       // console is available, write message if something has happened
       console.log(response.results);
    }

   })
}).
   filter("localClassName", function(){
        return function(value){
            /*var startName = value.indexOf("#") + 1;*/
            return String(value).slice(value.indexOf("#") + 1);
        }
   })

</script>

</body>
</html>

这是一种享受！

【讨论】：

一切都好吗？您可以做的另一项改进是将所有查询逻辑移至可重用的服务/工厂，并保持控制器更清洁/最小化。
好的，谢谢，今天就去看看服务/工厂的东西。感谢您的所有帮助。