Сортировка nes-repeat

Question

Я хочу отсортировать данные ответа по свойству цены, проблема в том, что есть элементы, которые определены как массив, и у каждого элемента есть цена, я хочу, чтобы весь список был отсортирован. Моя проблема сейчас связана с типом 2 (вложенный ng-repeat). В настоящее время тип 1 и 3 отображаются правильно, а затем тип 2 не сортируется.

HTML:

  <div class="flex-container row-cont">
        <div class="flex-container column prodlist">
            <ul>                
                <li ng-repeat="x in response.data | orderBy:sortprice">                                  
                    <div ng-if="x.type=='3'">
                        <div class="product flex-container row">
                                <div>{{x.price}}</div>                          
                        </div>
                    </div>
                    <div class="product flex-container row" ng if="x.type=='1'">
                            <div>{{x.fedex.price}}</div>                         
                    </div>
                    <div class="product flex-container row" ng-if="x.type=='2'" ng-repeat="obj in x.ups">                                
                            <div>{{obj.price}}</div>                                                                     
                    </div>
                </li>

javaScript:

    $scope.sortprice = function (item) {
        if (item.type == 1) {
            return item.fedex.price;
        }
        if (item.type == 2) {
            return ???;
        }
        if (item.type == 3) {
            return item.price;
        }

JSON:

({
  "fedex": {
    "creationDate": 1530110788904,
    "description": "loloo",
    "id": 1,
    "name": "product 1",
    "price": 10,
    "thumbnailUrl": "http://placehold.it/150/92c952",
    "url": "http://placehold.it/600/92c952"
  },
  "type": 1
},
 "type": 2,
  "ups": [
    {
      "creationDate": 1530110788904,
      "description": "fofofof",
      "id": 9,
      "name": "product 19",
      "price": 30,
      "thumbnailUrl": "lll.lll",
      "url": "http://ggg.ggg"
    },
    {
      "creationDate": 1530110788904,
      "description": "bdkdkkd",
      "id": 13,
      "name": "product 13",
      "price": 120,
      "url": "http://aaa.com"
    }
  ]
},
{
  "creationDate": 1530110788904,
  "deliveryComp": "dhl",
  "description": "officia delectus consequatur vero aut veniam explicabo molestias",
  "id": 7,
  "name": "product 7",
  "price": 14,
  "thumbnailUrl": "http://placehold.it/150/b0f7cc",
  "type": 3,
  "url": "http://placehold.it/600/b0f7cc"
},
{
  "type": 2,
  "ups": [
    {
      "creationDate": 1530110788904,
      "description": "qui eius qui autem sed",
      "id": 9,
      "name": "product 9",
      "price": 13,
      "thumbnailUrl": "http://placehold.it/150/51aa97",
      "url": "http://placehold.it/600/51aa97"
    },
    {
      "creationDate": 1530110788904,
      "description": "beatae et provident et ut vel",
      "id": 10,
      "name": "product 10",
      "price": 111,
      "thumbnailUrl": "http://placehold.it/150/810b14",
      "url": "http://placehold.it/600/810b14"
    }
  ]
})

Answer 1

Как вы его структурировали, вы всегда будете иметь продукты type 2 вместе, потому что все они обрабатываются одновременно во внутреннем ng-repeat. Если это желательно, то ответ @ sagar-agrawal должен сработать.

Однако, если вы намеревались показать product 9 (цена 13) до product 7 (цена 14), вам нужно сгладитьданные для целей этой обработки и имеют только один ng-repeat. Это можно сделать так:

//javascript
const combinedJson = [];
for (const data of json) {
  if (data.type === 2) {
    for (const innerData of data.ups) {
      combinedJson.push({type: 2, data: innerData, price: innerData.price});
    }
  }
  else {
    if (data.type == 3) {
      data.price = data.fedex.price;
    }
    combinedJson.push(data);
  }
}

$scope.sortprice = function (item) {
  return item.price;
};

Теперь combinedJson можно использовать в ng-repeat следующим образом:

<ul>                
  <li ng-repeat="x in combinedJson | orderBy:sortprice">
    <div class="product flex-container row">
      <div>{{x.price}}</div>                          
    </div>
  </li>
</ul>

Answer 2

Я думаю, это должно быть просто. Метод сортировки, который вы написали, требует среднего условия if (т.е. для type = 2), потому что это массив. Так что этот метод должен возвращать самую большую цену в массиве, верно? Вы можете написать что-то вроде этого. Вы должны вызвать эту функцию, прежде чем отобразить ее в формате html, сразу после того, как получите ответ от API.

$scope.sortItems = function(responseObj){
   var output;
   for(item in responseObj){
      if(item.type == 1){
         item.finalPrice = item.fedex.price;
      }
      else if(item.type == 2){
         item.ups.sort(function(a, b){ return b.price - a.price });
         item.finalPrice = item.ups[0].price;
      }
      else{
        item.finalPrice = item.price;
      }
   }
}
//The above method will add a new attribute name finalPrice denoting the prices. For type2, the max price of all objects in ups will be taken. So this will make sure we're comparing prices across all types.

И в верхнем div вы можете отсортировать элементы на основе finalPrice с помощью канала orderBy. IMO, вам больше не нужна функция сортировки.

<li ng-repeat="x in response.data | orderBy:finalPrice">                                  
                <div> <!--You dont need to check type=1 or 3 anymore as all the data has finalPrice attribute. -->
                    <div class="product flex-container row">
                            <div>{{x.finalPrice}}</div>                          
                    </div>
                </div>
                <div class="product flex-container row">
                        <div>{{x.finalPrice}}</div>                         
                </div>
                <div class="product flex-container row" ng-if="x.type=='2'" ng-repeat="obj in x.ups">                                
                        <div>{{obj.price}}</div>                                                                     
                </div>
            </li>

Каждый объект имеет новый атрибут как finalPrice. Тип 2 также имеет атрибут как брат типа 2, который будет максимальным значением всех объектов в его массиве ups. Так что теперь вы можете сделать сортировку по finalPrice. Это должно решить проблему.