Блог

Главная - Вопросы по программированию - ng повторите вложенный цикл

ng повторите вложенный цикл

#json #angularjs #angularjs-ng-repeat #nested-loops

Вопрос:

Я столкнулся с проблемой при отображении вложенных данных внутри ng-повтора. Я получаю данные для первых 4 полей, но те, которые более вложены, такие как метка и далее, данные полей не отображаются. последние 5 полей кажутся пустыми и не извлекают данные. Буду рад, если кто-нибудь сможет помочь в устранении проблемы.

 <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


<body>

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

    <!-- <p>Today's welcome message is:</p> -->


    <table border="2">
      <tr>
        <th>deliveryRecipient</th>
        <th>Pick Up Locality</th>
        <th>Delivery Locality</th>
        <th>Created On</th>
        <th>Name</th>
        <th>category</th>
        <th>Item Price</th>
        <th>Weight</th>
        <th>Qty</th>
        <th>Action</th>

      </tr>
      <tr ng-repeat="x in myWelcome">
        <td>{{x.deliveryRecipient}}</td>
        <td>{{x.pickupLocality}}</td>
        <td>{{x.deliveryLocality}}</td>
        <td>{{x.createdOn}}</td>
        <td>{{x.label}}</td>
        <td>{{x.category}}</td>
        <td>{{x.actualPriceLabel}}</td>
        <td>{{x.weight}}</td>
        <td>{{x.quantity}}</td>
        <td><button onclick="showgraphqldata()" type="button" class="view">View</button></td>

      </tr>
      <td ng-repeat="y in x.items">
      <td>
        <tr ng-repeat="z in y">
          <td>{{z.label}}</td>
          <td>{{z.category}}</td>
          <td>{{z.actualPriceLabel}}</td>
          <td>{{z.weight}}</td>
          <td>{{z.quantity}}</td>

        </tr>
        <input type="hidden" value="{{x.uid}}" />
      
    </table>
  </div>


  <!-- <p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome"
    variable.</p> -->

  <script>

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, $http) {
      $http({
        method: "GET",
        url: "https://api-stg.martcart.pk/api/v1/merchants/incomingOrders?archived=falseamp;isIncomingOrders=trueamp;isPurchaseOrders=trueamp;loadItems=trueamp;pageNumber=1amp;recordsPerPage=100amp;statusIn=NEW,VIEWED",
        headers: {
          datatype: 'JSON',
          
          , 'Content-Type': 'application/json'
        }
      }).then(function mySuccess(response) {

        $scope.myWelcome = response.data;

      }, function myError(response) {
        $scope.myWelcome = response.statusText;
      });
    });
  </script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).on('click', '.view', function () {

      var uid = $(this).parent().prev().val();
     
  </script>
</body>

</html>

прикрепленные изображения являются ответами, если данные json

введите описание изображения здесь

введите описание изображения здесь

Комментарии:

1. Пожалуйста, опубликуйте ответ в формате JSON, а не раскрывайте учетные данные api.

2. ответ json слишком длинный, чтобы публиковать его здесь

3. Можете ли вы привести минимальную выборку ответа? Я бы настоятельно рекомендовал удалить маркер носителя из описания

4. удалил маркер авторизации и добавил изображения ответов json

5. </tr> в </tr><tr ng-repeat=»x в myWelcome»><tr ng-repeat=»x в myWelcome»></tr> завершает область вашего » x «в вашем ng-repeat, так что любой html после </tr></tr> понятия не имеет, что такое «x». Вам нужно найти способ включить следующий <tr ng-repeat=’y в x.элементах’> в этот первый <tr ng-repeat=’y в x.элементах’><tr> блок. Одно из предложений-возьмите свой JSON, переделайте его так, чтобы было только 1 ng-повтор. Используйте ng-ifs, если вы еще не показали эти строки элементов.

Метки: