Многослойный JSON для формата AngularJS ng-repeat - PullRequest
Новая
       9

Многослойный JSON для формата AngularJS ng-repeat

0 голосов
/ 20 февраля 2019

Мои данные выглядят так: 

[
  {
    "TravelerExtended": {
      "ExtendedInt_1": {
        "#text": "0",
        "Label": "Do you require the hotel has a spa or fitness center?:"
      },
      "ExtendedInt_2": {
        "#text": "0",
        "Label": "Do you prefer to be prechecked into your room?:"
      },
      "ExtendedInt_3": {
        "#text": "0",
        "Label": "Connecting/Adjoining rooms, when traveling with family?:"
      },

Тогда моя область действия $ будет такой: 

define(function () {
    return function ($scope, $ticket, $person, $http, $el, $app) {
        // TODO

    $scope.is_loading = true;

    var params = {
        url: "http://10.100.1.98:81/myidapi.php",

        // Any other parameters will be sent as-is
        // to your remote web service.
        // For example, here we are sending an 'email' parameter:
        id: $ticket.id
    };

    $http.get('DP_URL/agent/misc/proxy', {params: params}).success(function(data) {
        $scope.is_loading = false;
        $scope.profiles = data;

    });    


    };

});

Затем, конечно, у меня есть вывод HTML, пытающийся использовать различныеФункции NG: 

<div ng-repeat="traveler in profiles">
        Extended Profile
    <div ng-repeat="profile in traveler.TravelerExtended"> 
        <li ng-repeat-"field in profile.ExtendedInt_1">
         {{field.label}} {{field.#text}}
        </li>
    </div>
</div>

Не могу понять, как добраться до третьего уровня данных.Кажется, что, возможно, исходная загрузка данных искажена или я просто запутываю функции ng-repeat.

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

То, что сказал Акбер, верно.Если вам нужно автоматически выполнить цикл внутри вашего объекта, вы можете сделать что-то вроде этого: 

$http.get('DP_URL/agent/misc/proxy', {params: params}).success(function(data) {
       $scope.is_loading = false;
       $scope.profiles = formatData(data);

   });    
formatData(dataObject) {
       var dataArray = [];
       angular.forEach(dataObject, function(value, key) {
               dataArray.push(value);
       });
       return dataArray;
   }
0 голосов
/ 20 февраля 2019

ng-repeat работает с массивом ... в структуре данных, которую вы вставили, вы получили только один массив (profiles) и внутри него объект (TravelerExtended), в котором есть еще 3 объекта (ExtendedInt_1, ExtendedInt_2, ExtendedInt_3).

Чтобы пройти их, вам нужно работать в пределах одного ng-repeat (потому что у вас есть только один массив).Следующий код выполняет обход для вставленной вами структуры данных. 

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
  ]

  $scope.profiles = [{
      "TravelerExtended": {
        "ExtendedInt_1": {
          "text": "0",
          "Label": "Do you require the hotel has a spa or fitness center?:"
        },
        "ExtendedInt_2": {
          "text": "0",
          "Label": "Do you prefer to be prechecked into your room?:"
        },
        "ExtendedInt_3": {
          "text": "0",
          "Label": "Connecting/Adjoining rooms, when traveling with family?:"
        }
      }
    },
    {
      "TravelerExtended": {
        "ExtendedInt_1": {
          "text": "0",
          "Label": "2 Do you require the hotel has a spa or fitness center?:"
        },
        "ExtendedInt_2": {
          "text": "0",
          "Label": "2 Do you prefer to be prechecked into your room?:"
        },
        "ExtendedInt_3": {
          "text": "0",
          "Label": "2 Connecting/Adjoining rooms, when traveling with family?:"
        }
      }
    }
  ];

  /*
  for(var i=0; i<$scope.profiles.length; i++){
    console.log($scope.profiles[0].TravelerExtended);
    console.log($scope.profiles[0].TravelerExtended.ExtendedInt_1);
  }
  */

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

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

  <div ng-repeat="traveler in profiles">
    {{traveler.TravelerExtended.ExtendedInt_1.Label}} {{traveler.TravelerExtended.ExtendedInt_1.text}} <br/>
    {{traveler.TravelerExtended.ExtendedInt_2.Label}} {{traveler.TravelerExtended.ExtendedInt_2.text}} <br/>
    {{traveler.TravelerExtended.ExtendedInt_2.Label}} {{traveler.TravelerExtended.ExtendedInt_2.text}} <hr/>
  </div>

</div>
...