ng-repeat with difference objects (firebase / angularjs)

Question

I have a structure:

{
  "cart" : {
    "object 1" : {
      "item1" : {
        "item_image" : "imagem1",
        "item_price" : 13,
        "item_qty" : 4
      },
      "item2" : {
        "item_image" : "imagem2",
        "item_price" : 14,
        "item_qty" : 1
      }
    },
    "object 2" : {
      "item1" : {
        "item_image" : "imagem3",
        "item_price" : 13,
        "item_qty" : 1
      },
      "item2" : {
        "item_image" : "imagem4",
        "item_price" : 12,
        "item_qty" : 5
      }     
    }
  }

using:

   $scope.menu=$firebaseArray(ref);
   console.log($scope.menu);

I get the data divided by objects (look the image)

Wel, I'm with difficult to order these objects like:

[object1] item1 item2

[object2] item1 item2

using ng-repeat, I currently have the code:

    <h4>object 1</h4>
<table>
    <tr ng-repeat="item in menu">
    <td>{{menu[$index].item_image}} </td>
    <td>{{menu[$index].item_price}}</td>
    <td>{{menu[$index].item_qty}} </td>
    </tr>
<table>

and like result, I have just two blanks td with zero informations.

Someone can help me? I looked at the angularjs and firebase manual, but I'm starting now and I'm breaking my head over this.

Pengyy · Accepted Answer · 2017-04-18 01:56:48Z

Seems you want to display menu.cart, it should be ng-repeat="menu in menu.cart".

And for JSON Object, you should try ng-repeat with json object this way: ng-repeat="(key, value) in object"

refer below code snippet:

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = {
      "cart": {
        "object 1": {
          "item1": {
            "item_image": "imagem1",
            "item_price": 13,
            "item_qty": 4
          },
          "item2": {
            "item_image": "imagem2",
            "item_price": 14,
            "item_qty": 1
          }
        },
        "object 2": {
          "item1": {
            "item_image": "imagem3",
            "item_price": 13,
            "item_qty": 1
          },
          "item2": {
            "item_image": "imagem4",
            "item_price": 12,
            "item_qty": 5
          }
        }
      }
    };

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <table>
    <tr ng-repeat="(key, object) in data.cart">
      <td>{{key}}</td>
      <td ng-repeat="(key, value) in object">{{key}}</td>
    </tr>
  </table>
</div>

Collectives™ on Stack Overflow

ng-repeat with difference objects (firebase / angularjs)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related