javascript - 在 AngularJS 中处理复杂的 JSON

Question

我得到了这个相当庞大且复杂的第 3 方 JSON，其中部分内容需要显示在我网站上的各个位置。这是该 JSON 的简短片段(相信我，它很短)

[
    {
    "EVENTS":[
    {
        "plays":[
        {
            "outcomes":[
                {
                "scoreOrder":1,
                "description":"HOME",
                "remote":"8726401",
                "innings":"2.13"
                },
                {
                "scoreOrder":2,
                "description":"DRAW",
                "remote":"8726403",
                "innings":"3.65"
                },
                {
                "scoreOrder":3,
                "description":"AWAY",
                "remote":"8726402",
                "innings":"2.31"
                }
            ],
            "code":null,
            "acro":"MR",
            "desc":"Result"
            },          
            {
            "outcomes":[
                {
                "scoreOrder":1,
                "description":"No Goal",
                "remote":"8726438",
                "innings":"78.43"
                },
                {
                "scoreOrder":2,
                "description":"Goal in 0-22",
                "remote":"8726434",
                "innings":"1.25"
                },
                {
                "scoreOrder":3,
                "description":"Goal in 23-45",
                "remote":"8726435",
                "innings":"3.89"
                },
                {
                "scoreOrder":4,
                "description":"Goal in 46-67",
                "remote":"8726436",
                "innings":"12.05"
                },
                {
                "scoreOrder":5,
                "description":"Goal in 68-90",
                "remote":"8726437",
                "innings":"37.36"
                }
            ],
            "code":null,
            "acro":"FG",
            "desc":"1st Goal"
            },          
            {
            "outcomes":[
                {
                "scoreOrder":1,
                "description":"Home -0.5",
                "remote":"8726482",
                "innings":"2.13"
                },
                {
                "scoreOrder":2,
                "description":"Away +0.5",
                "remote":"8726483",
                "innings":"1.42"
                }
            ],
            "code":null,
            "acro":"HDMP05",
            "desc":"Handicap"
            }
            ],
        "awayTeam":"Wigan City",
        "order":0,      
        "homeTeam":"Sheffield City",
        "eventStatus":"PENDING"
    }
]

而且时间至少长了十倍。正如您所看到的，它由几个重复键组成。由于它是第三方产品，我无法对其进行任何修改。 通常，当我不使用 Angular 时，我会这样处理:

function getJSON(){
    $.getJSON('url/rest/public/app/upcoming?channel=name&amount=1', function(json){
        if (json != null){
            console.log('Load Successful!');
            var events = json[0]['events'];                     
            processEvents(events);
        }
    });
}
function processEvents(events) {     
    events.forEach(function(event){
        var games = event['games'];
        plays.forEach(function(play) {
            var outcomes = play['outcomes'];
            outcomes.forEach(function (result) {
                $('.inning-' + game['acro'] + "-" + result['scoreOrder'] + '-' + event['order']).html(result['innings']);
            });
        });
        $('.inning-AwayTeam-' + event['order']).html(event['awayTeam'].substring(0,3).toUpperCase());
        $('.inning-HomeTeam-' + event['order']).html(event['homeTeam'].substring(0,3).toUpperCase());       
    });     
};

和 HTML:

<div class="row-winner">
    <div class="winner-frame inning-MR-1-1"></div>
    <div class="winner-frame inning-MR-2-1"></div>
    <div class="winner-frame inning-MR-3-1"></div>
</div>

但现在我需要使用 Angular 。从我学习的所有教程中，除了

之外，没有一个向我展示了其他内容

site.controller('jsonCtrl', function($scope, $http){
$http.get('url of json').success(function(data){
    $scope.json = data;     
});

});

和

<div class="random-name" ng-repeat="stuff in json | limitTo: 2">                            
    <div class="random-sub-name">{{stuff.key}}</div>                        
</div>

所以，我不仅不知道如何遍历 JSON，而且还迫使我过于频繁地使用 ng-repeat。我知道我可以通过使用类似 ng-repeat="stuff2 in json.parent" 的内容来缩小 ng-repeat 的范围，然后使用 {{stuff2.key }}，这对于所有事情来说都是毫无疑问的，主要是打字、代码的可读性和我的理智。我还知道 ng-repeat 在许多情况下可能非常方便，特别是当我想显示数据表时，但在这种特殊情况下这不是重点。因此，我仍然更喜欢一次性工具，而不需要限制循环。无论如何，有什么好的方法可以实现我的目标吗？ 或者我仍然坚持旧的 jQuery 方式？如果是这样，我可以在 Angular 的 app.js 中使用该 jQuery 代码吗？或者我需要使用 jQuery 代码包含另一个 js 文件，并仅让 Angular 来处理 ng-include >?

编辑

我忘了提及，我需要填充的 div 通常是单独的、非重复的实体，而不是结构化为表格。他们到处都是。而且数量很多 - 总数可能远远超过数百个。因此，在每个 div 上放置不同的 ng-repeat 指令是毫无疑问的。我的 jQuery 方法允许我使用相对较少的代码和每个 div 的自定义类(比 ng-repeat 短得多)来完成此任务，同时还处理其他任务。我选择 Angular 是因为它的速度(而且我确实喜欢 ng-repeat 的无忧 html 循环的概念)，但这种情况需要更多的东西......硬分。所以，帮忙吧!请:(

Answer 1

在 Angular 中，模型和 View 之间有明显的区别。如果您的模型中有大量数据，则可以在将其传递到 View 之前以您喜欢的方式对其进行预处理(通过将其分配给范围中的字段)。

但是对于 View 本身 - 在您显示事件列表的情况下 - 我强烈鼓励您尝试使用 ng-repeat 等。像这样的事情有什么问题:

<div ng-repeat="event in events" class="event">
  <h2>{{ event.homeTeam }} vs. {{ event.awayTeam }}</h2>
  <ul class="plays">
    <li ng-repeat="play in event.plays">
       <div ng-repeat="outcome in play.outcomes">
         Innings: {{outcome.innings}}
       </div>
       <!-- You could also use custom directives to render plays or outcomes -->
    </li>
  </ul>
  and so on...
</div>