AngularJS 1.6.4遍历多维JSON并在HTML循环展示的实现问题

Hey there! Let's work through how to render that external links data in AngularJS 1.6.4—since you've already got the JSON from your request, the main steps are grouping the data logically (by groupName) and looping through it cleanly in your HTML. Here's a straightforward approach:

Step 1: Prepare & Group Data in Your Controller #

First, we'll take the flat array of links, group them by their groupName, and sort each group by sortOrder to ensure links show up in the correct order. Add this to your AngularJS controller:

angular.module('yourAppModule', [])
  .controller('ExternalLinksController', function($scope) {
    // Assume this is the full data you received from your API request
    $scope.externalLinks = [
      { "extPageId": 10, "groupName": "BLAVATNIK ARCHIVE FOUNDATION", "title": "MISSION & HISTORY", "url": "http://www.mission-history/", "sortOrder": 1 },
      { "extPageId": 9, "groupName": "BLAVATNIK ARCHIVE FOUNDATION", "title": "LEADERSHIP & STAFF", "url": "http://www.leadership-staff/", "sortOrder": 4 },
      { "extPageId": 3, "groupName": "PROGRAMS", "title": "2016 PHOTOS", "url": "http://www.2016-photos/" }
      // Add remaining link objects here
    ];

    // Function to group links by groupName and sort each group
    $scope.getGroupedLinks = function() {
      const grouped = {};

      // First, group links by their groupName
      $scope.externalLinks.forEach(link => {
        if (!grouped[link.groupName]) {
          grouped[link.groupName] = [];
        }
        grouped[link.groupName].push(link);
      });

      // Sort each group's links by sortOrder (ascending)
      Object.keys(grouped).forEach(group => {
        grouped[group].sort((a, b) => a.sortOrder - b.sortOrder);
      });

      // Convert grouped object to an array for easier ng-repeat
      return Object.keys(grouped).map(groupName => ({
        groupName: groupName,
        links: grouped[groupName]
      }));
    };
  });

Step 2: Render the Data in HTML #

Now use AngularJS's ng-repeat to loop through the grouped data. This will first render each group header, then each link within the group:

<div ng-app="yourAppModule" ng-controller="ExternalLinksController">
  <!-- Loop through each link group -->
  <div class="link-group" ng-repeat="group in getGroupedLinks()">
    <!-- Display the group name as a heading -->
    <h3>{{ group.groupName }}</h3>
    <!-- Loop through each link in the current group -->
    <ul class="link-list">
      <li class="link-item" ng-repeat="link in group.links">
        <!-- Use ng-href instead of href for safe AngularJS binding -->
        <a ng-href="{{ link.url }}" target="_blank">{{ link.title }}</a>
      </li>
    </ul>
  </div>
</div>

Key Notes to Keep in Mind #

• Grouping Logic: We're handling grouping in the controller instead of a filter because AngularJS 1.6 doesn't have a built-in group filter, and controller-side processing is more performant for larger datasets.
• Sorting: The sortOrder property is used to ensure links appear in your desired order, even if the raw JSON isn't sorted.
• ng-href vs href: Always use ng-href when binding dynamic URLs in AngularJS—it prevents broken links if the URL hasn't finished rendering yet.
• Async Data: If your links come from an asynchronous $http request, make sure to assign $scope.externalLinks inside the request's .then() callback so the grouping function has access to the data once it's loaded.

内容的提问来源于stack exchange，提问作者Umair Malik