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

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

json angularjs string binding sparql

如何将angular中的单个json数据“值”绑定到命名的$scope变量（使用SPARQL查询返回的数据）？,json,angularjs,string,binding,sparql,Json,Angularjs,String,Binding,Sparql,如果你问了一个愚蠢的问题，我会向你道歉。已经检查了关于dataversity、堆栈溢出、google。。。检查了w3c并尝试了几种“试一试”解决方案，但就是无法实现这一点基本上，我使用angular来绑定SPARQL查询的结果，即数据集/查询中的类和类数使用Fuseki服务器1-1.1.2端点SPARQL 1.1。请参见问题后面的代码这很好地列出了URI格式的类名和URI格式的实例计数，但我只想在结果中看到for类后面的字符，而不是整个URI 我最初尝试在SPARQL查询中使用REPLA

如果你问了一个愚蠢的问题，我会向你道歉。已经检查了关于dataversity、堆栈溢出、google。。。检查了w3c并尝试了几种“试一试”解决方案，但就是无法实现这一点

基本上，我使用angular来绑定SPARQL查询的结果，即数据集/查询中的类和类数使用Fuseki服务器1-1.1.2端点SPARQL 1.1。请参见问题后面的代码

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

我最初尝试在SPARQL查询中使用REPLACE和STRAFTER函数在查询中执行此操作，即选择strafterstr？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数据，但只在类值的视图中显示后面的子字符串。这可以通过对x.class.value应用过滤器来实现。下面是你将如何做到这一点：

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

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

检索json文件并使用返回值填充scope变量：

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>

这是一张工作票

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

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

所以不是

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

我有

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>

这是一种享受

克里斯，谢谢。我根本无法让过滤器工作，然后又对过滤器进行了一次重击，得出了几乎相同的解决方案，但您的代码更整洁，所以我将试一试。非常感谢。谢谢，一切都好吗？您可以做的另一个改进是将所有查询逻辑移到可重用的服务/工厂中，并保持控制器的清洁/最小化。是的，非常感谢，今天就去看看服务/工厂的东西。谢谢你的帮助。

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

.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>