Блог

Главная - Вопросы по программированию - Цикл по объекту JSON в Angular

Цикл по объекту JSON в Angular

#angularjs #multidimensional-array #angularjs-scope

#angularjs #многомерный массив #angularjs-область видимости

Вопрос:

У меня есть цикл для продуктов, который работает отлично.

 <div ng-repeat="result in results track by result.uid">
      <img ng-src="{{ result.img';" alt="{{ result.name }}"
           title="{{ result.name }}" />
      <p><span class="money">amp;pound;{{ result.price | number:2 }}</span></p>
      <p class="product-title">
        <a ng-href="{{ result.url }}">{{ result.name }}</a>
      </p>
</div>

Внутри цикла есть объект, который содержит данные JSON.

 {{result.colours}}

Это содержит следующее:

     [
        {
            "id":866337128495,
            "title":"Product Title",
            "handle":"product-url",
            "image":"/img.jpg",
            "sku":"SKU001",
            "name":"Product Name",
            "type":"one_color",
            "data":"#000000"
        },
        {
            "id":866337128496,
            "title":"Product Title2",
            "handle":"product-url2",
            "image":"/img2.jpg",
            "sku":"SKU002",
            "name":"Product Name 2",
            "type":"one_color",
            "data":"#000000"
        }
]

Мне нужно выполнить цикл через это, и я попытался:

 <div ng-init="swatches=result.colours">
          <div ng-if="swatches">
                    <div ng-repeat="(key,value) in swatches">
                              {{key}}:{{value}}
                    </div>
           </div>
</div>

Это просто возвращает:

     0: [
        {
            "id":866337128495,
            "title":"Product Title",
            "handle":"product-url",
            "image":"/img.jpg",
            "sku":"SKU001",
            "name":"Product Name",
            "type":"one_color",
            "data":"#000000"
        },
        {
            "id":866337128496,
            "title":"Product Title2",
            "handle":"product-url2",
            "image":"/img2.jpg",
            "sku":"SKU002",
            "name":"Product Name 2",
            "type":"one_color",
            "data":"#000000"
        }
]

Я новичок в Angular, однако я исследовал множество различных возможностей для этого, но потерпел неудачу. Любые идеи будут приветствоваться!

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

1. Подозреваю, что ng-if в этом виноват, попробуйте изменить ng-if на ng-show . Причина в том, что ng-if создаст дочернюю область, а ваша swatches не будет работать.

2. не могли бы вы также включить свои результаты в формате JSON, пожалуйста

3. @KhaiKiong спасибо! Я попытался полностью удалить ng-if, однако, к сожалению, это не решается.

4. @NTP На самом деле у меня этого нет; Я редактирую систему шаблонов через стороннюю платформу, и JSON недоступен для результирующего JSON.

Ответ №1:

Взгляните на этот plunkr

вы почти на месте:

 <div ng-if="swatches">
                <div ng-repeat="data in swatches">
                          <div ng-repeat="(key,value) in data">
                            {{key}}:{{value}}
                          </div>
                          <hr>
                </div>
       </div>

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

1. Спасибо за это, логика мне кажется хорошей, однако она не работает — она просто возвращает букву из JSON в строку: uploadir.com/u/w9adh52j . Есть идеи?

2. @shopifydev : Каких результатов вы ожидаете? Соответствующим образом обновите вопрос

Ответ №2:

 angular.module("app", [])

  .run(function($rootScope) {

    $rootScope.results = [

      {
        name: "Demo",
        colors: [{
            "id": 866337128495,
            "title": "Product Title",
            "handle": "product-url",
            "image": "/img.jpg",
            "sku": "SKU001",
            "name": "Product Name",
            "type": "one_color",
            "data": "#000000"
          },
          {
            "id": 866337128496,
            "title": "Product Title2",
            "handle": "product-url2",
            "image": "/img2.jpg",
            "sku": "SKU002",
            "name": "Product Name 2",
            "type": "one_color",
            "data": "#000000"
          }
        ]
      }

    ]

  })  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="app">

  <div ng-repeat="result in results track by result.uid">
    {{result.name}}
    <div ng-init="swatches=result.colors">
      <div ng-if="swatches">
        <div ng-repeat="swatch in swatches">
          <div ng-repeat="(key, value) in swatch">
            {{key}}:{{value}}
          </div>
          <br>
        </div>
      </div>
    </div>
  </div>

</div>