如何在更新角度视图之前操作从JSON响应派生的对象

How can I manipulate an object derived from a JSON response before my angular view is updated?

本文关键字：JSON 操作 响应 派生 对象 更新 视图      更新时间：2023-09-26

我遇到了一个场景，需要接受以下JSON响应：

[
    {
        "url":"http://myurl1",
        "tags":"tag 1.1,tag1.2,tag1.3"
    },
    {
        "url":"http://myurl2",
        "tags":"tag 2.1,tag2.2"
    }
]

最终得到：

<a href="http://myurl1">tag 1.1</a>
<a href="http://myurl1">tag 1.2</a>
<a href="http://myurl1">tag 1.3</a>
<a href="http://myurl2">tag 2.1</a>
<a href="http://myurl2">tag 2.2</a>

我在jQuery中构建了这一点，只需在每个循环中存储url，将标签拆分成一个数组，然后循环输出到<a>标签，同时拉入之前存储的url的单个实例。不过，我真的很努力地切换到角度，这基本上就是我所拥有的。我有一种感觉，我太复杂了，信不信由你，我已经搜索了很长时间，已经搜索了几个小时。

如果json数据是平坦的，我会完成，但由于不是，我陷入了困境。

我得到了这个，这很好，而且它将所有标签都转储到一个<a>元素中，而不是我需要的。我假设我不会在这里创建嵌套循环，所以在控制器上：

标记：

<body ng-app="MyApp">
    <div ng-controller="TagCtrl">
        <a ng-repeat="tag in tags" href="{{tag.url}}">{{tag.tags}}</a>
    </div>
</body>

控制器：

app.controller("TagCtrl", function($scope, $http) {
  $http.get('data/tags.json').
    success(function(data, status, headers, config) {
      $scope.tags = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});

我只是不知道在哪里可以将标记数据分割成一个数组并循环使用，即使我这样做了，我该如何将其返回到视图中？我的直觉告诉我，这应该是一个指令，但我现在正在努力保持尽可能简单。

最后一件事，我没有能力更改JSON结构。

你可以做：

success(function(data, status, headers, config) {
    $scope.tags = [];
    data.forEach(function(urlObject) {
        // Get array of tags from the string of tags
        var tagsList = urlObject.tags.split(',');
        tagsList.forEach(function(tag) {
             $scope.tags.push({
                url: urlObject.url,
                tag: tag
             });    
        });
    });
})

然后使用相同的HTML。

从json响应（我们称之为data）：

var tags = [];
// Loop on every response item
for (var i = 0; i < data.length; i++) {
  // Get all tags from this response item
  var splits = data[i].tags.split(',');
  for (var j = 0; j < splits.length; j++) {
    tags.push({url: data[i].url, tag: splits[i]});
  }
}
// Put the array into our scope
$scope.tags = tags;

然后你可以使用你的模板：

<a ng-repeat="tag in tags" href="{{tag.url}}">{{tag.tag}}</a>

当前您正在尝试显示$scope上还不存在的值。即"标签"。$scope上唯一的变量是posts。如果你想以当前的方式继续，你的html需要如下：

<body ng-app="MyApp">
    <div ng-controller="TagCtrl">
        <div ng-repeat="post in posts">
            <a ng-repeat="tag in post.tags" href="{{post.url}}">{{tag}}</a>
        </div>
    </div>
</body>

然而，这不会把你的标签分开。我还没有测试过，但它应该可以工作：

(function(){
    app.controller('tagCtrl', tagCtrl);
    tagCtrl.$inject = ['$scope', '$http'];
    function tagCtrl($scope, $http){
        $scope.posts = [];
        $http.get('data/tags.json')
             .success(function(data){
                $scope.posts = data;
                $scope.posts.forEach(function(post){
                    post.splitTags = post.tags.split(",");
                });
             })
             .error(function(data, status, headers, config) {
                // log error
              });
    }
})();
<body ng-app="MyApp">
    <div ng-controller="tagCtrl">
        <div ng-repeat="post in posts">
            <a ng-repeat="tag in post.splitTags" href="{{post.url}}">{{tag}}</a>
        </div>
    </div>
</body>
相关文章：