Loop through JSON object within Angular

Question

I have a loop for products, which is working perfectly.

<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">&pound;{{ result.price | number:2 }}</span></p>
      <p class="product-title">
        <a ng-href="{{ result.url }}">{{ result.name }}</a>
      </p>
</div>

Within the loop, there's an object which has JSON data.

{{result.colours}}

This contains the following:

    [
        {
            "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"
        }
]

I need to loop through this, and have tried:

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

This simply returns:

    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"
        }
]

I'm new to Angular, however I've researched a lot of different possibilities to do this but have fallen short. Any ideas would be much welcomed!

Suspect ng-if is the culprit here, try change the ng-if to ng-show. Reason behind is the ng-if will create a child scope and your swatches will not working. — Khai Kiong
– Khai Kiong, Commented Mar 17, 2019 at 4:48
@KhaiKiong thanks! I've tried removing the ng-if completely however it's not resolved unfortunately. — shopifydev
– shopifydev, Commented Mar 17, 2019 at 20:37
@NTP I don't actually have this available; I'm editing the templating system through a third party platform, and the JSON isn't accessible for the result JSON. — shopifydev
– shopifydev, Commented Mar 17, 2019 at 20:38

Shashank Vivek · Accepted Answer · 2019-03-17 07:58:05Z

0

Take a look at this plunkr

you are almost there:

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

answered Mar 17, 2019 at 7:58

Shashank Vivek

17.6k9 gold badges70 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shopifydev Over a year ago

Thanks for this, the logic seems good to me however it doesn't work - it simply returns a letter from the JSON per line: uploadir.com/u/w9adh52j. Any ideas?

Shashank Vivek Over a year ago

@shopifydev : What results are you expecting ? Update the question accordingly

Shridhar Sharma · Accepted Answer · 2019-03-19 04:31:47Z

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>

Collectives™ on Stack Overflow

Loop through JSON object within Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related