How to implement post correctly with Angular

Question

I've posted my code below along with the JSON data I want to display. Specifically, I want to be able to do {{client.label}} and have the clients in a list. Unfortunately the only thing that works is when I do {{client}} which gives me the entire JSON object, which I don't want. I'm new to Angular, and I know I'm obviously doing something wrong but I'm not quite sure what. Any help is appreciated!

<body ng-controller="myController">
  <ul>
    <li ng-repeat="client in userData">
      {{client.label}}
    </li>
  </ul>
  <script>
    var app = angular.module('myApp', []);
    app.controller("myController", function ($scope, $http) {
      $http({
        url: 'myURL/blah/blah',
        method: 'POST',
        data: {
          common: { clientName: '6012' },
          qualifier: '$ALL.$ALL.$ALL.$ALL.$ALL',
          pattern: 'configs\\..*'
        },
        headers: { 'Content-Type': 'application/json' }
      }).success(function(data) {
        $scope.userData = data;
      });
    });
  </script>
</body>

{
  "data": {  
    "parameters": [  
      {  
        "qualifier": "$ALL.$ALL.$ALL.$ALL.$ALL",
        "key": "themes",
        "value": {  
          "amairlines": {  
            "id": "amairlines",
            "label": "American Airlines"
          },
          "amazonfork": {  
            "id": "amazonfork",
            "label": "Amazon Fork"
          },
          "bestbuy": {  
            "id": "bestbuy",
            "label": "Best Buy"
          },
          "botw": {  
            "id": "botw",
            "label": "Bank of the West"
          },
          "bbva": {  
            "id": "bbva",
            "label": "BBVA"
          },
          "redleaf": {  
            "id": "redleaf",
            "label": "Red Leaf"
          },
          "citi": {  
            "id": "citi",
            "label": "Citi"
          },
          "costco": {  
            "id": "costco",
            "label": "Costco"
          },
          "firstcitizens": {  
            "id": "firstcitizens",
            "label": "First Citizens"
          },
          "publix": {  
            "id": "publix",
            "label": "Publix"
          },
          "homedepot":{  
            "id": "homedepot",
            "label": "Home Depot"
          },
          "hsbc": {  
            "id":"hsbc",
            "label": "HSBC"
          },
          "huntington": {  
            "id": "huntington",
            "label": "Huntington"
          },
          "kohls": {  
            "id": "kohls",
            "label": "Kohls"
          },
          "nordstrom": {  
            "id": "nordstrom",
            "label": "Nordstrom"
          },
          "paypal": {  
            "id": "paypal",
            "label": "PayPal"
          },
          "primax": {  
            "id": "primax",
            "label": "Primax"
          },
          "td": {  
            "id": "td",
            "label": "Toronto Dominion"
          },
          "usaa": {  
             "id": "usaa",
             "label": "USAA"
          }
        }
      }
    ]
  }
}

Use ng-repeat in the HTML to iterate over the list.

ssc-hrep3
– ssc-hrep3

2016-07-01 14:45:41 +00:00
Commented Jul 1, 2016 at 14:45 — ssc-hrep3
– ssc-hrep3, Commented Jul 1, 2016 at 14:45

Daniel Cottone · Accepted Answer · 2016-07-01 14:50:44Z

2

Change the ng-repeat to this:

<li ng-repeat="client in userData.parameters[0].value">
  {{client.label}}
</li>

edited Jul 1, 2016 at 14:50

answered Jul 1, 2016 at 14:46

Daniel Cottone

4,52029 silver badges39 bronze badges

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

1 Comment

BobRoss Over a year ago

Thank you! Works just as I wanted, I'll accept this answer as soon as it lets me

idan · Accepted Answer · 2016-07-01 14:55:39Z

1

The data you want to iterate over is not the data that is returned but deeper. You should change $scope = data; to $scope = data.parameters[0].value; Or change the way it is retuned.

One more thing, usually it's better to handle data through a centralized service.

answered Jul 1, 2016 at 14:55

idan

4844 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to implement post correctly with Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related