How to display JSON data in html page using ng-repeat in AngularJS?

Question

I have one JSON data how to display these data using ng-repeat? I am new in angularJS. I dont how to to repeat nested in ng-repeat in angularJS This is my JSON data.Please help me to show the outputs?

How to get these data using ng-repeat

customerId=56b6f841d085980f2241909c

name: Maxxwell

Total Product=2

Total Price=685 //(2*18.5)+240(3*(240*10/100))

createdOn: 07-Feb-2016 10:50:05 UTC

  etc....

See $scope.orders is an array I call an api and got this data

orderPromise.success(function(data, status, headers, config) 
{   
    $scope.orders=
    [
         {

          "customerId": "56b6f841d085980f2241909c",
          "address": {
               "name": "Maxxwell",              
               "city": "Texas",
               "country": "USA",

          },
          "products": [
               {
                "productId": "569df8bcd08598371e9b5ad9",
                "quantity": 2,
                "productDetails": {
                     "itemId": "569df86dd08598371e9b5ad8",                         
                     "actualPrice": "18.5",
                     "offer": 0,                         
                     "modifiedOn": "19-Jan-2016 12:35:32 UTC"
                }
               },
               {
                "productId": "569f2d2dd085980ecfc8997b",
                "quantity": 3,
                "productDetails": {
                     "itemId": "569f294dd085980ecfc89971",                         
                     "actualPrice": "240",
                     "offer": 10,                         
                     "modifiedOn": "06-Feb-2016 09:09:46 UTC"
                }
               }
          ],          
          "createdOn": "07-Feb-2016 10:50:05 UTC"
         }
    ]
});

I need to display this output using ng-repeat in html page

customerId=56b6f841d085980f2241909c
name: Maxxwell
Total Product=2
Total Price=685 //(2*18.5)+240(3*(240*10/100))
createdOn: 07-Feb-2016 10:50:05 UTC
    :
    :

I don't know its correct or not but its not working in my html page Please correct me if it is wrong?

    $scope.ordertemp=[];
    $scope.orderval={};

    var countval = $scope.orders.length;

    for(var j=0;j<countval;j++)
    {
        $scope.orderval.buyerId = $scope.orders[j].customerId;
        $scope.orderval.name = $scope.orders[j].address.name

        $scope.orderval.totalitem = $scope.orders[j].products.length


        var count = $scope.orders[j].products.length
        var total = 0;
        var save=0;
        for(var i=0;i<count;i++)
        {

            var actualprice = 0;
            var offer = 0;
            var price = 0;  
            var quantity=0;


            actualprice = $scope.orders[j].products[i].productDetails.actualPrice;
            offer = $scope.orders[j].products[i].productDetails.offer;
            quantity = $scope.orders[0].products[i].quantity;           

            price = actualprice - (actualprice * offer)/100
            total = total + (price * quantity);         
            save = save +((actualprice/100)*offer)* quantity            

        }
    }   

    $scope.orderval.totalprice = total;
    $scope.orderval.save = save;

    $scope.ordertemp.push($scope.orderval);

    alert(JSON.stringify($scope.ordertemp));

When i alert this data will shown but its not repeated in my ui page Why? Can i add any filter for using this to add Total price?

Answer 1

you can also do like this,First flatten your response as your need. Like below

 $scope.orders=
[
     {

      "customerId": "56b6f841d085980f2241909c",
      "address": {
           "name": "Maxxwell",              
           "city": "Texas",
           "country": "USA",

      },
      "products": [
           {
            "productId": "569df8bcd08598371e9b5ad9",
            "quantity": 2,
            "productDetails": {
                 "itemId": "569df86dd08598371e9b5ad8",                         
                 "actualPrice": "18.5",
                 "offer": 0,                         
                 "modifiedOn": "19-Jan-2016 12:35:32 UTC"
            }
           },
           {
            "productId": "569f2d2dd085980ecfc8997b",
            "quantity": 3,
            "productDetails": {
                 "itemId": "569f294dd085980ecfc89971",                         
                 "actualPrice": "240",
                 "offer": 10,                         
                 "modifiedOn": "06-Feb-2016 09:09:46 UTC"
            }
           }
      ],          
      "createdOn": "07-Feb-2016 10:50:05 UTC"
     }
]

Now code for flatten the response

 var myFinalArr = [];
           for (index in $scope.orders) {
                var obj = {};
                var productSum = 0;
                obj.customerId = $scope.orders[index].customerId;
                obj.name = $scope.orders[index].address.name;
                obj.city = $scope.orders[index].address.city;
                obj.country = $scope.orders[index].address.country;
                obj.createdOn = $scope.orders[index].createdOn;
                obj.productCount = $scope.orders[index].products.length;
                for (index2 in $scope.orders[index].products) {
                     productSum = parseFloat(productSum) + parseFloat($scope.orders[index].products[index2].productDetails.actualPrice);
                     if (index2 == ($scope.orders[index].products.length) - 1) {
                          obj.productSum = productSum;
                     }
                }
                myFinalArr.push(obj);
           }
           console.log(myFinalArr);// your final Arr
           $scope.orders = myFinalArr;

           })

In view use this

           <div ng-repeat = "orderData in orders">
                <div>CustomerId : {{orderData.customerId}}</div>
                <div>Name : {{orderData.name}}</div>
                <div>Total Product : {{orderData.productCount}}</div>
                <div>Total Price : {{orderData.productSum}}</div>
                <div>CreatedOn : {{orderData.createdOn}}</div>
           </div>

Answer 2

You can do :

    <div ng-repeat="order in orders">
       <div>
        customerId={{order.customerId}}
        </div>
        <div>
        name:{{order.address.name}}
        </div>
        <div>
        Total product={{order.products.length}}
        </div>
</div>

And you'll need a function or a watch to get the total of your products. If you give me a Plnkr or Jsfiddle link with a working sample I could probably provide a more complete answer if you need.

Happy coding!

Answer 3

try this

<div ng-repeat="(key, value) in orders">
      <p>{{value.customerId}}</p>
      <p>{{value.createdOn}}</p> 
      <p>{{value.address.name}}</p> 
    <div ng-repeat="(key, provalues) in value.products">
       <p>{{provalues.quantity}}</p>
       <p>{{provalues.productDetails.actualPrice}}</p>
    </div>
</div>

Answer 4

To display json Data in html add json filter to your expression like

<div ng-repeat="order in revoluza = (orders | json)">
  <div>
    customerId={{order.customerId}}
  </div>
  <div>
    name:{{order.address.name}}
  </div>
  <div>
    Total product={{order.products.length}}
  </div>
</div>

Answer 5

Please find the clear answer below html part

<div ng-repeat="(key,value) in accounttypes">
   <ul><li ng-repeat="account in value.services">{{account.types}}</li></ul>
</div>

js part

bankservice.findByaccounttype($scope.selectedservice).then(function(results)  
{
    $scope.accounttypes = results;
});

function bankservice($q)
{
    var accountservice=[{"id":"1","title":"Savings Account","services":[{"types":"ATM card request"},{"types":"loan request"}]},
    {"id":"2","title":"Current Account","services":[{"types":"cheque book request"},{"types":"ATM card request"}]},
    {"id":"3","title":"Demat Account","services":[{"types":"loan request"},{"types":"ATM card request"}]}];

    return {
        findAll: function() {
            var deferred = $q.defer();
            deferred.resolve(accountservice);
            return deferred.promise;
        },
      findByaccounttype: function (selectedservice) {
        var deferred = $q.defer();
        var results = accountservice.filter(function (element) {return selectedservice === element.title;
        });
        deferred.resolve(results);
        return deferred.promise;
    }
   }
}